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

Question

我在我的 React 应用程序中包含 SVG 作为可重用组件。 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，从而提高 performance/page 负载？

Answer 1

您可以在 public 文件夹中创建一个静态文件 sprites.svg 并在 symbol 标签中使用特定的 id

定义您的 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

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

导出函数 DropDownIcon(){ return( <>这里是你的 svg 值 ) }

Answer 3

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} />

希望这些代码对您有所帮助。个人比较推荐第二种方法。

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

Best way to include reusable SVG in React

javascript

reactjs

typescript

svg

next.js

1。带有 webpack 的 SVG

2。 SVG 作为组件

3。 SVG 作为路径