在React中包含可重用SVG的最佳方式

Question

我将SVG作为可重用组件包含在我的react应用程序中。SVG组件示例如下

import React from 'react';
export default function IconComponent(): JSX.Element {
const svg = `
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.4811 26.4927H29.7345C26.5728 26.4927 23.9995 23.921 23.9978 20.761C23.9978 17.5977 26.5711 15.0243 29.7345 15.0227H36.4811C37.1711 15.0227 37.7311 15.5827 37.7311 16.2727C37.7311 16.9627 37.1711 17.5227 36.4811 17.5227H29.7345C27.9495 17.5243 26.4978 18.976 26.4978 20.7593C26.4978 22.541 27.9511 23.9927 29.7345 23.9927H36.4811C37.1711 23.9927 37.7311 24.5527 37.7311 25.2427C37.7311 25.9327 37.1711 26.4927 36.4811 26.4927Z" fill="#0C1727"/>
</svg> `;
return (
<span
className="icon icon-component"
dangerouslySetInnerHTML={{ __html: svg }}
/>
);
}

在页面级别，我正在导入IconComponent并重用它。有没有其他最好的方法可以在React页面中包含可重用的SVG，从而提高性能/页面负载？

Answer 1

您可以在公用文件夹中创建一个静态文件sprites.svg，并在具有特定id 的symbol标记中定义您的svg

<svg
display="none"
width="0"
height="0"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<defs>
<symbol viewBox="0 0 40 40" fill="none" id="your_icon_id">
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.4811 26.4927H29.7345C26.5728 26.4927 23.9995 23.921 23.9978 20.761C23.9978 17.5977 26.5711 15.0243 29.7345 15.0227H36.4811C37.1711 15.0227 37.7311 15.5827 37.7311 16.2727C37.7311 16.9627 37.1711 17.5227 36.4811 17.5227H29.7345C27.9495 17.5243 26.4978 18.976 26.4978 20.7593C26.4978 22.541 27.9511 23.9927 29.7345 23.9927H36.4811C37.1711 23.9927 37.7311 24.5527 37.7311 25.2427C37.7311 25.9327 37.1711 26.4927 36.4811 26.4927Z" fill="#0C1727"/>
</symbol>
</defs>
</svg>

你可以通过调用它的id 来使用它

const SvgIcon = ({ name, className, ...props }) => (
<svg className={className} {...props}>
<use xlinkHref={`/static/images/sprites.svg#${name}`} />
</svg>
);
<SvgIcon name="your_icon_id" width={40} height={40}/>

通过这种方式，您的捆绑包javascript大小将减小，因为它没有svg代码

p/s：您可以使用svgo来优化SVG精灵文件

Answer 2

1。带有webpack的SVG

命令行

$ yarn add -D @svgr/webpack

webpack.config.js

const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
module: {
rules: [
//...
{
test: /.svg$/,
use: ['@svgr/webpack'],
},
],
},
//...
};

然后

import Star from 'star_icon.svg';
<Star />

2.SVG作为组件

import { ReactComponent as Star } from 'star_icon.svg';
<Star />
<Star width="64" height="64" fill="yellow" />

你也可以使用这样的道具。

3.SVG作为路径

import Star from 'star_icon.svg';
<img src={Star} />

我希望这些代码能对你有所帮助。就我个人而言，我推荐第二种方法。

Answer 3

最佳做法是在源文件夹中保留一个资产文件夹，导出图标，为每个SVG创建函数，并返回SVG值，不要使用危险的HTML，这不是最佳做法。

导出函数DropDownIcon(({返回(<gt；您的svg值在这里<>)}

Answer 4

避免将原始图标直接添加到组件中。假设您想要更改svg图标；您必须更新原始图标。这种方法被认为是的不良做法

相反，我建议在React中使用SVG图标，将其作为组件导入。遵循以下步骤：

1. 创建一个"；资产"；项目中的文件夹
2. 将SVG图标文件放置在"；资产"；文件夹
3. 在组件中，按如下方式导入图标：

import Icon from "/assert/icon.svg"
import React from "react"
export default function IconComponent(): JSX.Element {
return (
<img src={Icon} alt=""/>
);
}

在使用Typescript的情况下，您将根据导入图标面临问题。打字给你留下一个信息：

TS2307: Cannot find module '/assert/icon.svg' or its corresponding type declarations.

或者运输车说：[ts] cannot find module '/assert/icon.svg'.

通常，您将无法导入svg图标。

这个问题已经被报道了很多次。如果您有时间，请花几分钟时间查看以下链接：：

无法在typescript 中导入svg文件

https://duncanleung.com/typescript-module-declearation-svg-img-assets/

无法将SVG文件导入react

导入svg文件时typescript找不到模块

要避免此问题，请执行以下步骤：

• 创建@types/assets/index.d.ts并处理代码：

declare module "*.svg";

希望这个解决方案能在您的项目中发挥作用。