我在我的反應應用程式中包含 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 以提高性能/頁面加載？

uj5u.com熱心網友回復：

您可以在公共檔案夾中創建一個靜態檔案，并在具有特定 IDsprites.svg的標簽中定義您的 svgsymbol

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

uj5u.com熱心網友回復：

最佳實踐是在源檔案夾中保留一個資產檔案夾并匯出您的圖示并為每個 SVG 創建函式并回傳 SVG 值，并且不要使用危險的 HTML，這不是最佳實踐。

export function DropDownIcon(){ return( <>你的 svg 值 </> ) }

uj5u.com熱心網友回復：

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

我希望這些代碼對您有所幫助。個人推薦第二種方法。

標籤：javascript 反应 打字稿 svg 下一个.js

上一篇：在vue3中有多個名稱僅在大小寫上有所不同的模塊

下一篇：D3餅圖未回傳正確資料