svg-sprite-loader 的外掛,用來根據匯入的 svg 檔案自動生成 symbol
標籤並插入 html,接下來就可以在模版中方便地使用 svg-sprite 技術了。
使用 svg-sprite 的好處
如果不知道 svg-sprite 是什麼,可以參考大神張鑫旭的文章:未來必熱:SVG Sprite技術介紹
- 頁面程式碼清爽
- 可使用 ID 隨處重複呼叫
- 每個 SVG 圖示都可以更改大小顏色
安裝外掛
npm install svg-sprite-loader --save-dev複製程式碼
webpack 配置,在Vue.config.js加入處理 svg 的 loader:
const path = require('path')
function resolve(dir) {
return path.join(__dirname, '.', dir)
}
module.exports = {
chainWebpack: config => {
config.module.rules.delete("svg"); //重點:刪除預設配置中處理svg,
//const svgRule = config.module.rule('svg')
//svgRule.uses.clear()
config.module
.rule('svg-sprite-loader')
.test(/\.svg$/)
.include
.add(resolve('src/icons')) //處理svg目錄
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
},
configureWebpack: () => ({
// resolve: {
// alias: require('./alias.config').webpack
// }
// module: {
// rules: [{
// test: /\.svg$/,
// use: [{
// loader: "svg-sprite-loader",
// options: {
// symbolId: 'icon-[name]'
// }
// }]
// }]
// }
})
}
複製程式碼
這時候發現還是不行啊,body
中並沒有看到 symbol
標籤。
就是說只有我們自己引入的 svg 檔案需要經過 svg-sprite-loader,那麼就將這些 svg 統一放到一個目錄下,我這裡放到了 src/icons
然後要在用到的地方引入需要的svg
import './src/icon/target.svg';複製程式碼
重新啟動專案,終於在 html 中看到了 symbol
標籤!
配置好了,就可以用了。使用方法很簡單,相較於原來插入 svg 圖示的方法(img src 或將 svg 整個寫入 html),用 svg-sprite 更加簡單且清爽:
|
|
嗯,就這樣短短一行。xlink:href
中傳入 svg ID 就好了,由於在上面的配置檔案中我們直接使用檔名作為 symbol
的 ID,所以這裡傳入的 ID 即為你想顯示的圖示的 svg 檔名,記得加上 #
。
自動匯入
你會發現,這裡要想插入某個圖示,都得 import
,每用一個都要重複一遍這個流程,太麻煩,那麼我們就讓 src/icons/svg/下的 svg 檔案都自動匯入吧。
webpack 可以幫我們做到:
|
程式碼例項:
首先在main.ts中引入import './icons/index',
icons/index.js,將icons/svg中的所有svg匯入並註冊全域性元件SvgIcon
//SvgIcon元件程式碼
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName"/>
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>複製程式碼
接下來就可以使用組建了
關於 require.context
的詳細用法,可以參考 webpack 文件:dynamic requires
這樣一來,每當我們修改或增加新的 svg,只要將檔案往這個目錄下一扔,外掛就會自動幫我們生成相應的 symbol
標籤啦,接下來就只管用吧