react项目中使用svg

使用customize-cra和react-app-rewired的项目

安装 customize-cra 和 react-app-rewired

npm install customize-cra react-app-rewired  --svae

2.修改 package.json 启动方式

"scripts": {
    "dev": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

安装svg-sprite-loader

npm install svg-sprite-loader --save-dev

4.在项目根目录建立 config-overrides.js

const {override, addWebpackModuleRule} = require('customize-cra');
const path = require('path');

module.exports = override(
    addWebpackModuleRule({
        test: /\.svg$/,
        include: [path.resolve(__dirname, "./src/icons")],
        use: [
            {
                loader: 'svg-sprite-loader',
                options: {symbolId: "icon-[name]"}
            }]
    })
);

5.在src目录下新建icons 文件夹，将svg文件存在该文件夹下
6.建立 src/icons/index.js

const req = require.context('./', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

导入原理：这里

react 主程序入口 src/index.js 将该 src/icons/index.js 导入

import './icons'

8.编写svg组件

import React, {Component} from 'react';
import "../styles/components/SvgIcon.less";


class SvgIcon extends Component {

    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidMount() {
    }


    render() {
        const {icon, className} = this.props;

        const styleExternalIcon = {
            mask: `url(${icon}) no-repeat 50% 50%`,
            WebkitMask: `url(${icon}) no-repeat 50% 50%`
        };

        const isExternal = (path) => /^(https?:|mailto:|tel:)/.test(path);

        return (
            <>
                {isExternal(icon) ?
                    <div style={styleExternalIcon} className={`svg-external-icon svg-icon ${className}`}/> :
                    <svg className={`svg-icon ${className}`} aria-hidden="true">
                        <use xlinkHref={`#icon-${icon}`}/>
                    </svg>
                }
            </>
        );
    }
}

export default SvgIcon;

9.编写css

.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.svg-external-icon {
    background-color: currentColor;
    mask-size: cover !important;
    display: inline-block;
}

说明：addWebpackModuleRule() 方法添加的新 loader 会放在 eslint loader 之后的 loader 的 oneOf 内的第一个，由于是 oneOf ，所以不必担心后面的 loader 影响该 svg ，该 svg 会被打包进 js 文件，动态挂载到 <body> 之下形成 <symbol>

配置原生webpack的项目

1.执行eject

npm run eject

注意此操作不可逆

2.安装svg-sprite-loader

npm install svg-sprite-loader --save-dev

3.配置 /config/webpack.config.js （npm run eject后的配置）
注意新添加的loader一定要放到file-loader之前

 {
              test: /\.(eot|woff2?|ttf|svg)$/,
              exclude: path.resolve(__dirname, "../src/icons"), //不处理指定svg的文件(所有使用的svg文件放到该文件夹下)
              use: [
                {
                  loader: "url-loader",
                  options: {
                    name: "[name]-[hash:5].min.[ext]",
                    limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file
                    outputPath: "font",
                    publicPath: "font"
                  }
                }
              ]
            },

            {
              test: /\.svg$/,
              loader: "svg-sprite-loader",
              include: path.resolve(__dirname, "../src/icons"), //只处理指定svg的文件(所有使用的svg文件放到该文件夹下)
              options: {
                symbolId: "icon-[name]" //symbolId和use使用的名称对应      <use xlinkHref={"#icon-" + iconClass} />

              }
            }

4.在src目录下新建icons 文件夹，将svg文件存在该文件夹下
5.建立 src/icons/index.js

const req = require.context('./', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

导入原理：这里

react 主程序入口 src/index.js 将该 src/icons/index.js 导入

import './icons'

7.编写svg组件

import React, {Component} from 'react';
import "../styles/components/SvgIcon.less";


class SvgIcon extends Component {

    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidMount() {
    }


    render() {
        const {icon, className} = this.props;

        const styleExternalIcon = {
            mask: `url(${icon}) no-repeat 50% 50%`,
            WebkitMask: `url(${icon}) no-repeat 50% 50%`
        };

        const isExternal = (path) => /^(https?:|mailto:|tel:)/.test(path);

        return (
            <>
                {isExternal(icon) ?
                    <div style={styleExternalIcon} className={`svg-external-icon svg-icon ${className}`}/> :
                    <svg className={`svg-icon ${className}`} aria-hidden="true">
                        <use xlinkHref={`#icon-${icon}`}/>
                    </svg>
                }
            </>
        );
    }
}

export default SvgIcon;

8.编写css

.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.svg-external-icon {
    background-color: currentColor;
    mask-size: cover !important;
    display: inline-block;
}