A brief introduction to the use of SVG ICONS in the React project

It is recommended to use iconfont.cn. After downloading, you can use it as an image, but it is not easy to change its color. It is not good to distinguish active buttons from inactive buttons.

Before we can use it as an SVG file, we need to do some preparatory work: install the Loader and configure the WebPack

Installation: To install svG-sprite-loader and SvGo-loader, run yarn add svg-sprite-loader svgo-loader -d. The “O” of SVgo stands for optimize. For example, svGO-Loader can solve the problem that some SVG files have fill attributes and fail to add colors later

Webpack configuration: This configuration is required in webpack.config.js, but cannot be found in the project. Check the React official document, and find that the configuration file is hidden by default

Specific configuration: webpack.config.js

{
  test: /\.svg$/,
  use: [
    {loader: 'svg-sprite-loader'.options: {}},
    {
      loader: 'svgo-loader'.options: {
        plugins: [{removeAttrs: {attrs: 'fill'}} // Remove the fill attribute]}}]},Copy the code

Use:

  1. TreeShaking: import SVG. SVG needs to be used otherwise TreeShaking will be deleted and require will be used because TreeShaking does not work with require
require('icons/money.svg');
require('icons/tag.svg');
require('icons/chart.svg');
Copy the code
  1. Use SVG icon, code example: xlink
<li>
  <svg className={"icon"} >
    <use xlinkHref="#money"/>
  </svg>
  <Link to="/tags">The label</Link>
</li>
Copy the code
  1. We found that every SVG needs require once. When there are many SVG’s, there are many duplicate require’s. We can encapsulate it as a component, passing different file names through props to display different SVG ICONS
import React from 'react';
import cs from 'classnames'

let importAll = (requireContext: __WebpackModuleApi.RequireContext) = > 
    requireContext.keys().forEach(requireContext);
try {importAll(require.context('icons'.true./\.svg$/)); }catch (error) {console.log(error); } type Props ={ name? : string; } & React.SVGAttributes<SVGElement>const Icon = (props: Props) = >{
  const{name, children, className, ... rest} = props;return (
    <svg className={cs('icon', className)} {. rest} >
      {props.name && <use xlinkHref={The '#' +props.name} / >}
    </svg>)}export default Icon;
Copy the code

Require. context is implemented by Webpack

Note: the above code will report an error because the TS dependencies for the webpack environment are not installed. Install yarn add — dev@types /[email protected]

  1. When encapsulated as an Icon component, you can use SVG with a single Icon tag
.import Icon from './Icon'; . <li><NavLink to="/tags" activeClassName="selected">
    <Icon name="tag"/>
    <span>The label</span>
  </NavLink>
</li>
<li>
  <NavLink to="/money" activeClassName="selected">
    <Icon name="money"/>
    <span>Charge to an account</span>
  </NavLink>
</li>
<li>
  <NavLink to="/statistics" activeClassName="selected">
    <Icon name="chart"/>
    <span>statistical</span>
  </NavLink>
</li>.Copy the code