Vue中使用SVG图标的步骤【钢镚核恒】

Vue中使用SVG图标的步骤

简介

svg 可缩放矢量图形（Scalable Vector Graphics）

svg 优势：任意缩放，超强显示效果，较小文件，可压缩

svgo 用来压缩svg中无用信息

svg-sprite-loader 将加载的 svg 图片拼接成 雪碧图，在其他地方通过 引用

在了解这些概念后，就上路吧！ 这里概念排很少，大家可以到其他地方扩充知识~

上路

1. 添加依赖

   "svg-sprite-loader": "4.1.3",
   "svgo": "1.2.0"
   

   方法一：复制到 package.json，执行 npm i

   方法二：直接安装npm i svg-sprite-loader svgo --save-dev

2. 添加 svg 组件（创建components/SvgIcon/index.vue）

   
   
   
   
   &