React项目中使用svg图标

简介

步骤

  • 安装svg-sprite-loadernpm i svg-sprite-loader --save-dev

  • src/目录下新建目录icons/,用来放置图标相关文件

  • src/icons/目录下新建svg/目录,用来放置svg/图标文件

  • src/icons/目录下新建index.js文件

const req = require.context('./svg', false, /\.svg$/) const requireAll = requireContext => requireContext.keys().map(requireContext) requireAll(req)
  • 修改入口文件src/index.js,引入src/icons/index.js
// 导入svg import './icons'
  • src/components/目录下新建目录SvgIcon/

  • src/components/SvgIcon/目录下新建文件index.jsx

import React from 'react' import PropTypes from 'prop-types' import './index.less' export default function SvgIcon({ iconClass, className }) { const styleExternalIcon = { mask: `url(${iconClass}) no-repeat 50% 50%`, WebkitMask: `url(${iconClass}) no-repeat 50% 50%` } const isExternal = path => /^(https?:|mailto:|tel:)/.test(path) const svgClass = className ? 'svg-icon ' + className : 'svg-icon' const iconName = `#icon-${iconClass}` return ( <> {isExternal(iconClass) ? <div style={styleExternalIcon} className={`svg-external-icon ${svgClass}`} /> : <svg className={svgClass} aria-hidden="true"> <use xlinkHref={iconName} /> </svg> } </> ) } SvgIcon.propTypes = { iconClass: PropTypes.string.isRequired, className: PropTypes.string }
  • src/components/SvgIcon/目录下新建文件index.less
.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;
}
  • 修改项目配置文件config-overrides.js
const path = require('path') const { override, addWebpackAlias, // ... addWebpackModuleRule, } = require('customize-cra') const resolve = dir => path.resolve(__dirname, dir) module.exports = override( // 路径别名 addWebpackAlias({ '@': resolve('src') }), // ... // svg-sprite-loader addWebpackModuleRule({ test: /\.svg$/, include: [resolve('src/icons')], use: [ { loader: 'svg-sprite-loader', options: { symbolId: "icon-[name]" } } ] }) )
  • 代码中使用
import SvgIcon from '@/components/SvgIcon' // iconClass 是想使用的 .svg 文件名 // className 是额外附加的样式类名。可以调整 svg 颜色和大小 <SvgIcon iconClass='user' /> // iconClass 支持外链(自动识别) <SvgIcon iconClass='https://emoji.lonelyion.com/svg/1f418.svg' className='pink' />

其他


创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: