Summary of various methods of using svg in react (with code)

This article introduces to you a summary of various methods of using svg in react (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Advantage

• SVG can be read and modified by many tools (such as vscode)

• No distortion, the image is clear when zoomed in or out

• SVG files are pure XML and also a DOM structure

• Easy to use, design software can directly export

Compatibility

Previous compatibility chart, or go to caniuse.com to view

##Compatibility is not a big problem. Of course, if your website still needs to be compatible with these old browsers, there are corresponding solutions in the community, such as some of Zhang Xinxu's SVG downward compatibility graceful downgrade technology

How to use

There are various options, the one that suits your needs is the best

Use directly in the template

const Home = () => (
    <div>
        <svg>
            <rect></rect>
        </svg>
    </div>
)

1. If each svg needs to be drawn by the front end, the requirements for the front end are higher.

2. If each icon is copied from the svg code given by the designer, various labels must be changed, and an error will be reported if the error is corrected

This method is not friendly

Convert svg to font

iconfont

Copy the code directly into the project css, customize your label style, and refer to Alibaba’s official article. It is simple and crude to use, and has high browser compatibility. However, it needs to be uploaded manually (other solutions are welcome to add) , In addition, if you want to deploy to an environment other than Alibaba's CDN, you need to download it first and then upload it to the target environment. It is a bit troublesome.

In addition, icomoon and others provide similar solutions

Convert svg into react component

Please note: The following will include typescript related configuration

Conversion before project construction

Example:

typescript-react-svg-icon-generator, we need a pre-command to convert svg.

// svg-generator.js

const generator = require('typescript-react-svg-icon-generator')

const config = {
    svgDir: './svg/',
    destination: './Icon/index.tsx'
}
generator(config)

$ node ./svg-generator.js

Use:

import Icon from './Icon'
export default class App extends Component {
    render() {
        return <icon></icon>
    }
}

In addition, svgr (mentioned below) also provides this solution, please check it yourself

Conversion when building the project

Example:

@svgr/webpack

Yes. Yes, this is a webpack loader.

// webpack rules config
{
    test: /\.svg$/,
    loader: '@svgr/webpack'
}

// 全局声明svg component定义
declare interface SvgrComponent extends React.StatelessComponent<react.svgattributes>> {}

declare module '*.svg' {
    const content: SvgrComponent
    export default content
}</react.svgattributes>

import IconReact from '@assets/svg/react.svg'

const Home = () => (
    <p>
        <iconreact></iconreact>
    </p>
)

The benefits of this solution are not only reflected in the conversion during build, but more importantly It fully inherits SVGAttributes and requires no additional learning costs! You can refer to the project ts-react-webpack4, or the scaffolding steamer-react-ts

In addition, there are react-svg, svg-react-loader, etc. It is also implemented in a similar way.

Recommended related articles:

The role of svg path: How to use svg path in web development

How Storage Event implements inter-page communication

The above is the detailed content of Summary of various methods of using svg in react (with code). For more information, please follow other related articles on the PHP Chinese website!