Start with a reference project ts-React-webpack4, or scaffolding steams-React-TS

advantage

  • SVG can be read and modified by a wide variety of tools (such as vscode)
  • No distortion, zoom in and zoom out images are very clear
  • SVG files are pure XML and a DOM structure
  • Easy to use, design software can be directly exported

compatibility

For a compatibility chart, or check it out at caniuse.com

Compatibility isn’t a big deal either. Of course, if your website still needs to be compatible with these older browsers, there are corresponding solutions on the community, such as Zhang Xinxu’s elegant downgrading technique for SVG downward compatibility

use

There are a variety of solutions, and the one that suits your needs is the best

Use directly in templates

const Home = (a)= > (
    <div>
        <svg width={300} height={300}>
            <rect width="100%" height="100%" style={{ fill: 'purple', strokeWidth: 1.stroke: 'rgb(0.0.0) '}} / >
        </svg>
    </div>
)
Copy the code
  1. If each SVG wants to draw on the front end, the front end is more demanding.
  2. If each icon is copied from the SVG code given by the designer, the various tags need to be changed, and the error will be reported

It’s not a friendly approach

Convert SVG to a font

iconfont

Copy the code directly to the project CSS, customize your tag style, refer to the official Ali article, easy to use, and high browser compatibility. However, manual upload is required (welcome to add other solutions). In addition, if you want to deploy to an environment other than Ali’s CDN, you need to download it first and then upload it to the target environment. Slightly troublesome.

There are also icomoon and others that offer similar solutions

Convert SVG to react Component

Note: Typescript-related configurations are included below

Transformation before project construction

Ex. :

Typescript-react-svg-icon-generator, which requires us to have a lead 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 the code
$ node ./svg-generator.js
Copy the code

Use:

import Icon from './Icon'
export default class App extends Component {
    render() {
        return <Icon kind='close' color='# 748' width={500} height={100} />}}Copy the code

In addition, SVGR (mentioned below) also offers this solution, please check for yourself

Transformation at project build time

Ex. :

@svgr/webpack

Yes, this is a Webpack loader.

// webpack rules config
{
    test: /\.svg$/,
    loader: '@svgr/webpack'
}
Copy the code
// Declare the SVG Component definition globally
declare interface SvgrComponent extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}

declare module '*.svg' {
    const content: SvgrComponent
    export default content
}
Copy the code
import IconReact from '@assets/svg/react.svg'

const Home = (a)= > (
    <div>
        <IconReact width={180} height={180} color="purple" />
    </div>
)
Copy the code

This solution benefits not only in build-time transformation, but more importantly, it fully inherits SVGAttributes with no additional learning costs! See project TS-React-webpack4, or scaffolding steams-react-TS

In addition, react-SVG, svG-react-loader, etc. are implemented in a similar manner.

Any comments or suggestions are welcome in the comments below!