javascript - Cea mai bună modalitate de a include SVG reutilizabil în React

Include SVG ca component reutilizabil în aplicația mea React. Exemplul de component SVG este următorul

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

La nivel de pagină, import IconComponent și îl refolosesc. Există vreo altă metodă mai bună de a include SVG-uri reutilizabile în paginile React care să îmbunătățească performanța/încărcarea paginii?

Răspuns #1

Poți crea un fișier static sprites.svg în folderul public și să definești SVG-ul tău într-un tag symbol cu un id specific

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

și îl poți folosi apelându-i id-ul

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

<SvgIcon name="your_icon_id" width={40} height={40}/>

în acest fel, dimensiunea pachetului tău javascript va scădea deoarece nu conține cod SVG

P/s: Poți folosi svgo pentru optimizarea fișierelor SVG sprites

Răspunsul #2

1. SVG cu webpack

linia de comandă

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'],
      },
    ],
  },
  //...
};

atunci

import Star from 'star_icon.svg';

<Star />

2. SVG ca componentă

import { ReactComponent as Star } from 'star_icon.svg';

<Star />
<Star width="64" height="64" fill="yellow" />

de asemenea, poți folosi props astfel.

3. SVG ca traseu

import Star from 'star_icon.svg';

<img src={Star} />

Sper că aceste coduri te vor ajuta. Personal, recomand a doua metodă.