Summary of various methods of using svg in react (with code)-H5 Tutorial-php.cn

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

不言

Release： 2018-08-02 14:39:59

Original

8654 people have browsed it

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

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

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

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

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

Copy after login

If each svg needs to be drawn by the front end, the requirements for the front end are higher.
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

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

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)

Copy after login

$ node ./svg-generator.js

Copy after login

Use:

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

Copy after login

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

Copy after login

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

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

Copy after login

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

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

Copy after login

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.