SVG在VUE(vue-cli3.0)项目中的简单应用

本文仅做直接使用的参考,详细可参考下列文章

https://juejin.im/post/5bc93881f265da0aea69ae2e

https://www.zhangxinxu.com/wordpress/2014/07/introduce-svg-sprite-technology/

第一步:使用npm安装svg-sprite-loader

  npm i svg-sprite-loader -save

第二步:配置vue.config.js

第三步:创建自己的svg组件svgIcon(注意iconName值必须有#号)

第四步:新增icons文件(包含svg文件 和 index.js)

 第五步:main.js中引入

在具体页面的使用,由于是全局注册,可直接使用svg-icon组件

以上所述大致目录结构如下:

原文地址:https://www.cnblogs.com/zkpThink/p/12780372.html