使用 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 ...