Vue 项目引入 SVG 图标
Vue 项目引入 SVG 图标
关于 SVG
SVG 是一种可缩放矢量图形(Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML),用于描述二维矢量图形的图形格式。SVG 由 W3C 制定,是一个开放标准。
SVG 在既能满足现有图片的功能的前提下,又是矢量图,在可访问性上面也非常不错,并且有利于 SEO 和无障碍,在性能和维护性方面也比 icon font 要出色许多。
SVG 与 icon font 的区别:
- icon font 是字体渲染,而 svg 是图形渲染,icon font 在一倍屏幕下渲染效果不好,细节部分锯齿明显
- icon font 因为是字体只能支持单色
- icon font 可读性不够好,icon font 主要在页面用 Unicode 符号调用对应的图标,对浏览器和搜索引擎不友好
安装依赖
在 vue 项目中引入 svg,首要工作是安装依赖包 svgo 和 svg-sprite-loader,这两个工具包都是给 webpack 打包 svg 图标资源使用。
- svgo: Node.js tool for optimizing SVG files.
- svg-sprite-loader: Webpack loader for creating SVG sprites.
然后配置 webpack 对于 svg 文件的 loader,修改 vue.config.js
文件,引入刚刚安装的 svg loader,详情如下:
引入资源
这里举个栗子,新建 src/assets/icons
文件夹,在此文件夹下新建 svg
子文件夹用于存放 svg 图标文件,并新增 svgo 配置文件 svgo.yml
,详见官方文档,添加简要配置如下:
在此文件夹下新增 index.js 引入 svg 资源并全局注册 vue 组件,代码如下:
require.context()
方法来创建自己的(模块)上下文,这个方法有 3 个参数:
- 要搜索的文件夹目录
- 是否还应该搜索它的子目录
- 以及一个匹配文件的正则表达式
创建一个通用的引入图标的 SvgIcon 组件如下:
最后不要忘记在 main.js
里引入 icons:
食用方式,添加 svg 文件到 /assets/icons/svg
文件夹下即可,如添加 github.svg
后在 vue 文件里引入:
参考文章:
在 vue 项目中优雅的使用 Svg
金点网络-全网资源,一网打尽 » Vue 项目引入 SVG 图标
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
- 是否提供免费更新服务?
- 持续更新,永久免费
- 是否经过安全检测?
- 安全无毒,放心食用