如何封装 svg

112 阅读 0 评论 74 点赞

我是靠谱客的博主心灵美星星，这篇文章主要介绍如何封装 svg，现在分享给大家，希望可以做个参考。

svg

svg 代表可缩放矢量图形，以 XML 格式定义基于矢量的图形

例：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
<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"></rect> <g clip-path="url(#clip0_55_1126)"> <path d="M23.1806 9H9.11684V23H23.1806V9Z" fill="white" fill-opacity="0.01"></path> <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"></path> </g> <defs> <clipPath id="clip0_55_1126"> <rect width="14.0637" height="14" fill="white" transform="translate(9.11684 9)"></rect> </clipPath> </defs> </svg>
```
1
2
3
4
5
6
7
8
9
10
11
12
13
<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>
```
1
2
3
4
<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"></rect> <g clip-path="url(#clip0_55_1126)"> <path d="M23.1806 9H9.11684V23H23.1806V9Z" fill="white" fill-opacity="0.01"></path> <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"></path> </g> <defs> <clipPath id="clip0_55_1126"> <rect width="14.0637" height="14" fill="white" transform="translate(9.11684 9)"></rect> </clipPath> </defs>
```
1
2
3
4
5
6
7
8
9
10
11
<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 文件夹

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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>
        </>
    );
}