admin管理员组

文章数量:1317906

I am including SVG as reusable ponent on my react application. Sample of SVG ponent is as follows

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=";>
<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-ponent"
            dangerouslySetInnerHTML={{ __html: svg }}
        />
    );
}

On page level, I am importing IconComponent and reusing it. Is there any other best way to include reusable SVGs in React pages which improves performance/page load?

I am including SVG as reusable ponent on my react application. Sample of SVG ponent is as follows

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/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-ponent"
            dangerouslySetInnerHTML={{ __html: svg }}
        />
    );
}

On page level, I am importing IconComponent and reusing it. Is there any other best way to include reusable SVGs in React pages which improves performance/page load?

• javascript
• reactjs
• typescript
• svg
• next.js

Share Improve this question Follow asked Mar 14, 2022 at 8:03 user521024user521024 53122 gold badges99 silver badges2929 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

You can create a static file sprites.svg in public folder and define your svg in symbol tag with specific id

<svg
    display="none"
    width="0"
    height="0"
    version="1.1"
    xmlns="http://www.w3/2000/svg"
    xmlns:xlink="http://www.w3/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>

and you can use it by call its id

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

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

with this way, your bundle javascript size will decrease because it have no svg code

P/s: You can use svgo for optimizing SVG sprites files

1. SVG with webpack

mand line

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

then

import Star from 'star_icon.svg';

<Star />

2. SVG as ponent

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

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

also you can use props like this.

3. SVG as path

import Star from 'star_icon.svg';

<img src={Star} />

I hope these codes will help you. Personally, I remend the second method.

The best practice will be to keep an assets folder inside the source folder and export your icons and create functions for every SVG and return SVG values and do not use dangerous HTML which is not the best practice.

export function DropDownIcon(){ return( <>Your svg value here </> ) }

Avoid adding the raw icon directly to your ponent. Assume that you want to change the svg icon; you must update the raw icon. This approach is considered as bad practice

Instead, I suggest using SVG icons in React by importing them as ponents. Follow these steps:

1. Create an "assets" folder within your project
2. Place the SVG icon files inside the "assets" folder
3. In your ponent, import the icon as follows:

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

In the case that you're using the Typescript, you will face the issue according the import icon. Typescript leaves you a message:

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

Or transpiler says: [ts] cannot find module '/assert/icon.svg'.

In general, you'll be unable to import svg icon.

This issue has been reported numerous times. If you have a moment, please take a few minutes to review the following links::

Unable to import svg files in typescript

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

Cannot import SVG file into react

typescript cannot find module when import svg file

To avoid this issue, follow the step:

• Create the @types/assets/index.d.ts and handle the code:

declare module "*.svg";

Hopefully this solution works in your project.

本文标签： javascriptBest way to include reusable SVG in ReactStack Overflow