使用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 文件，動態(tài)掛載到 <body> 之下形成 <symbol>
配置原生webpack的項目
1.執(zhí)行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;
}
