Vue 中svg的使用

安裝svg-sprite-loadercli3以上的版本 在vue.config.js 配置如下

module.exports = ,

css: {},
// 以下才是svg的配置 
chainwebpack: config => )
}}

// 本文中的檔案目錄為：src/views/widget/svg-icon/index.vue

svg.svg-icon(aria-hidden="true")
use(:xlink:href="iconname")

裡面的內容為：

const requireall = requirecontext => requirecontext.keys().map(requirecontext)

const req = require.context('./icon', false, /\.svg$/)
requireall(req)

import svgicon from 'src/views/widget/svg-icon/index'

import 'src/assets/image/svg/index'
vue.component('svg-icon', svgicon)

el-form(:model="formdata", ref="form", :rules="formrules")

el-form-item(prop="mobile", clearable)
div.icon
svg-icon(icon="account")
el-input(v-model="formdata.mobile", placeholder="手機號")
el-form-item(prop="passwd", clearable)
div.icon
svg-icon(icon="key")
el-input(v-model="formdata.passwd", placeholder="密碼")
icon 屬性傳的是svg檔案對應的檔名
 
vue專案svg使用
檔案 const path require path 傳遞乙個相對路徑，會處理得到乙個相對路徑 function resolve dir module.exports end 此時其實已經可以使用了 template中 icon qq use svg 在script中 import icons sv...
在vue專案中優雅的使用Svg
本文主要以 vue cli3 搭建的專案為例，來聊一下如何在專案中更優雅的使用 svg 眾所周知，vue cli3 已經推出很長一段時間了，大家可以感受一下 vue cli3 帶來的零配置體驗。but，也相應帶來了一些弊端，就是如歸需要修改預設的 loader 時，會比較麻煩。好了，上正題，建議看此...
vue動態使用svg,封裝為元件使用
0.需要安裝的庫 1.在assets檔案下建立icons資料夾 2.在components資料夾下建立svgicon元件 3.vue.config.js檔案的配置項 4.使用 基於vue cli3配置，配置檔案為vue.config.js devdependencies import vue fro...