当前位置：首页 > news >正文

SVG图标，SVG symbols，SVG use标签

news 2025/7/16 11:36:02

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-loader yarn 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 的颜色扫清障碍。

    [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 中。