使用 SVG 组件 1. 安装 svg-sprite-loader 2. 新增 SvgIcon 组件 3. 在 src 文件夹中创建 icons 文件夹。icons 文件夹中新增 svg 文件夹(用来存放 svg 文件)与 index.js 文件 ...
. 安装 svg sprite loader npm install D svg sprite loader . 修改 vue.config.js . 在 components 中创建 SvgIcon 组件 . 在 src 目录下创建 icons文件夹, icons svg 用来放 svg文件, icons index.js 写相关js . 在 main.js 中引入 . 使用 i ...
2019-12-12 11:01 0 252 推荐指数:
使用 SVG 组件 1. 安装 svg-sprite-loader 2. 新增 SvgIcon 组件 3. 在 src 文件夹中创建 icons 文件夹。icons 文件夹中新增 svg 文件夹(用来存放 svg 文件)与 index.js 文件 ...
3.在src/components下新建文件夹及文件SvgIcon/index.vue,ind ...
首先,为什么要选择svg,理由是 1.兼容性,现在svg的基本兼容性已经很好了。在canIuse中可以查看。 2.相比较传统的图片,svg在放大的时候不会失真 3.因为svg是xml形式的,利于浏览器seo搜索,所以一般logo强烈建议用svg 4.可以修改颜色和宽高(fill,width ...
...
在src/components下新建文件夹及文件SvgIcon/index.vue,index.vue ...
使用第三方插件vue-svg-icon npm i vue-svg-icon -D 在入口文件main.js引入 import Vue from from 'vue' import Icon from 'vue-svg-icon/Icon.vue' //引入 ...
1.在src/icons/svg存放icon矢量图(以.svg结尾)(可以去https://www.iconfont.cn查找合适的icon,选择svg下载) 2.svg 目录主要用于存放 svg 文件,来看一下 index.js 的内容,功能就是把组件注册到全局,方便使用 ...
svg图标优点 安装svg-sprite-loader 文件夹目录 (xxx.svg 注意:这里的 xxx 不要使用中文) 配置依赖 在components目录下增加一个SvgIcon组件 在icon ...