如何封装 svg

最新推荐文章于 2025-03-26 15:12:37 发布

原创最新推荐文章于 2025-03-26 15:12:37 发布

· 410 阅读

0 ·

版权

文章标签：

#javascript #前端 #react.js

HTML\CSS 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了如何在React应用中封装SVG图标，以便更好地管理和控制SVG的大小。通过将SVG的结构分为外部容器和内部内容，创建一个自定义组件，允许外部传入尺寸属性来动态调整SVG的显示。这种方法有助于提高代码复用性和灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                        
                    
                    svg 
svg 代表可缩放矢量图形，以 XML 格式定义基于矢量的图形
例：<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>
 
 
在 react 中封装 svg 
背景 
我将 svg 图片导入了项目文件夹中，例<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.0758667" width="32.1457" height="32" fill="black"/>
<g clip-path="url(#clip0_55_1126)">
<path d="M23.1806 9H9.11684V23H23.1806V9Z" fill="white" fill-opacity="0.01"/>
<path d="M10.8748 11.625L15.0939 16.5302V20.213L17.2035 21.25V16.5302L21.4226 11.625H10.8748Z" stroke="#EBEBEB" stroke-width="0.875" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_55_1126">
<rect width="14.0637" height="14" fill="white" transform="translate(9.11684 9)"/>
</clipPath>
</defs>
</svg>
 
如果直接使用的话，无法控制 svg 图片的大小，所以我想是否可以封装一下
 
过程 
将 svg 图片分为两部分，外边 svg 标签部分和内容部分<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">

</svg>
 <rect x="0.0758667" width="32.1457" height="32" fill="black"/>
<g clip-path="url(#clip0_55_1126)">
<path d="M23.1806 9H9.11684V23H23.1806V9Z" fill="white" fill-opacity="0.01"/>
<path d="M10.8748 11.625L15.0939 16.5302V20.213L17.2035 21.25V16.5302L21.4226 11.625H10.8748Z" stroke="#EBEBEB" stroke-width="0.875" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_55_1126">
<rect width="14.0637" height="14" fill="white" transform="translate(9.11684 9)"/>
</clipPath>
</defs>
 
创建 downArrow.tsx 文件夹import React from "react";

export const DownArrow = () => {
    return (
        <>
            <rect x="0.816376" width="32.1457" height="32" fill="black"/>
            <g clipPath="url(#clip0_39_400)">
            <path d="M23.9211 9H9.85735V23H23.9211V9Z" fill="white" fillOpacity="0.01"/>
            <path d="M20.6981 14.25L17.1822 17.75L13.6663 14.25" stroke="#EBEBEB" strokeWidth="0.875" strokeLinecap="round" strokeLinejoin="round"/>
            </g>
            <defs>
            <clipPath id="clip0_39_400">
            <rect width="14.0637" height="14" fill="white" transform="translate(9.85735 9)"/>
            </clipPath>
            </defs>
        </>
    );
}
 
封装 svg.jsx，应该可简单啦，我这里就不写啦

                