SVG图标，SVG symbols
项目中图标的使用，趋势是使用svg作图标的，优点如下
兼容现有图片能力前提还支持矢量
可读性好，有利于SEO与无障碍
在性能和维护性方面也比iconfont要强很多
怎么在项目中优雅的使用svg图标，下面我们将采用类似雪碧图的做法
1、普通的使用
普通的使用遇到以下的问题：
- 下载的 svg 可能有自带的 fill 属性，添加 color 样式不生效。
- 封装 Icon 组件时，每用到一个 svg 图标都需要引入一下，比较繁琐。
import apple from "../assets/icons/apple.svg" // 得到一个计算之后的路径
const Icon = (props) => {
return (
<img src={apple} />
);
};
export default Icon;
2、全局配置（svg-sprite-loader）
svg-sprite-loader官网
官方解释是：一个用于创建 svg 雪碧图的 Webpack 加载器。通俗的讲：svg-sprite-loader 会把你引入的 svg 塞到一个个 symbol 中，合成一个大的 svg，最后将这个大的 svg 放入 body 中。
symbol 的 id 如果不特别指定，就是你的文件名。在页面上形成这样的元素，然后我们使用use标签使用类名的形式引入。
-
打开webpack配置
先看自己项目目录有没有config这个文件，如果没有就需要调出这个文件，运行这个命令：
yarn eject
注意：如果项目没有提交要先提交再运行这个命令，运行完就出现config文件，打开可以看到有一个webpack.config.js文件，反正就是暴露webpack的配置文件，方便我们去配置对应的loader -
安装并配置
yarn add --dev svg-sprite-loaderyarn add --dev svgo-loader安装这两个依赖，然后将下面代码放进config>webpack.config.js文件里面的module>rules>oneOf里面
{ test: /\.svg$/, use: [ { loader: 'svg-sprite-loader', options: {} }, { loader: 'svgo-loader', options: {} }, ] }
3、 使用svg组件化Icon
完成上述配置之后，我们就可以通过指定 id 的方式使用 use 的方式使用 svg 了。但是不能使用import方式引入
不适用import的原因：import 的方式引入了 svg ，在页面上是找不到 icon 的。这是因为 import 引入的 apple 实际上是一个对象，通过 svg use 指定的 #id 的方式最终被 webpack 理解为 apple 对象没被用到，所以就 Tree Shaking 掉它，因此我们需要用 require 的方式引入（原因：CommonJS 模块的这种动态加载的性质意味着无法应用 Tree Shaking，因为在实际运行代码之前无法确定需要哪些模块）。
// 下面这种方式有坑，最终会被 Tree Shaking
// import apple from "../assets/icons/apple.svg" // 得到一个计算之后的路径
require('../assets/icons/apple.svg')
const Icon = (props) => {
return (
<svg fill="red">
<use xlink:href="#apple"/>
</svg>
);
};
export default Icon;
而且经过 svg-sprite-loader 加载之后，不仅可以通过指定 id 的方式引入 icon，而且相比图片引入的方式，最大的优点就在于可以通过给 svg 标签添加 fill 属性来调整 icon 的颜色。
4、批量引入所有的 svg静态文件
项目中我们用到 svg 的地方，都需要手动引入一下然后使用，当 svg 多起来的时候，一遍遍的引入就显得不太聪明。能不能像 Element UI 那样，直接指定一个 name 就能使用特定的 svg ？那就需要在 Icon 组件中将所有的 svg 做批量的引入：
// require('../assets/icons/apple.svg')
// require('../assets/icons/banana.svg')
// require('../assets/icons/orange.svg') // 这样就仿佛一个不太聪明的机器人
//直接引入 src/assets/icons 目录下的所有 svg
const importAll = (requireContext: __WebpackModuleApi.RequireContext) => {
requireContext.keys().forEach(requireContext);
}
try {
importAll(require.context('../assets/icons', true, /\.svg$/));
} catch (error) {
console.log(error);
}
const Icon = (props) => {
return (
<svg>
<use xlinkHref={'#' + props.name}></use>
</svg>
);
};
export default Icon;
ps：直接从网上拷贝上述代码会报错，需要 yarn add @types/webpack-env -D 一下。
5、svgo-loaderg改变 Icon组件的颜色
svg-sprite-loader可以帮助我们通过 svg use + 指定 id 的方式引入 svg，虽然可以通过给 svg 添加内联 fill 属性的方式修改 icon 的颜色，但是并不建议这样做，而是通过 class 样式的方式指定 icon 的颜色，这就需要用到 svgo-loader 先把 svg 自带的 fill 属性给清除掉，为我们后续指定 icon 的颜色扫清障碍。文章来源：https://www.toymoban.com/news/detail-618004.html
[svgo-loader](https://github.com/svg/svgo "svgo-loader") 是基于 SVG Optimizer 的一个加载器，而 SVG Optimizer 是一个基于node.js 的工具，用于优化 SVG 矢量图形文件，它可以删除和修改SVG元素，折叠内容，移动属性等。
// 配置 webpack.config.js
// 配置之前需要安装该 loader
// npm install --dev svgo-loader
// yarn add --dev svgo-loader
{ loader: 'svg-sprite-loader', options: {} },
{ loader: 'svgo-loader', options: {
plugins: [{
name: 'removeAttrs', // 必须指定name！
params: {attrs: 'fill'}
}]
}
}
通过上述配置，引入项目中的 svg 文件会先经过 svgo-loader 清楚 fill 属性，然后再通过 svg-sprite-loader 将你引入的 svg 塞到一个个 symbol 中，合成一个大的 svg，最后将这个大的 svg 放入 body 中。文章来源地址https://www.toymoban.com/news/detail-618004.html
到了这里，关于SVG图标，SVG symbols，SVG use标签的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
