当前位置：网站首页>如何封装 svg

如何封装 svg

2022-08-04 18:17:00 【Anita-Sun】

svgsvg 代表可缩放矢量图形，以 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，应该可简单啦，我这里就不写啦