這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān) svg-sprite-loader如何在VUE-cli3中使用，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
svg-sprite-loader 的插件，用來根據(jù)導(dǎo)入的 svg 文件自動生成 symbol 標(biāo)簽并插入 html，接下來就可以在模版中方便地使用 svg-sprite 技術(shù)了。
使用 svg-sprite 的好處
頁面代碼清爽
可使用 ID 隨處重復(fù)調(diào)用
每個 SVG 圖標(biāo)都可以更改大小顏色
安裝插件
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"); //重點(diǎn):刪除默認(rèn)配置中處理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]'
// }
// }]
// }]
// }
})
}這時候發(fā)現(xiàn)還是不行啊， body 中并沒有看到 symbol 標(biāo)簽。
就是說只有我們自己引入的 svg 文件需要經(jīng)過 svg-sprite-loader，那么就將這些 svg 統(tǒng)一放到一個目錄下，我這里放到了 src/icons
然后要在用到的地方引入需要的svg
import './src/icon/target.svg';
重新啟動項目，終于在 html 中看到了 symbol 標(biāo)簽！
配置好了，就可以用了。使用方法很簡單，相較于原來插入 svg 圖標(biāo)的方法（img src 或?qū)?svg 整個寫入 html），用 svg-sprite 更加簡單且清爽：
嗯，就這樣短短一行。 xlink:href 中傳入 svg ID 就好了，由于在上面的配置文件中我們直接使用文件名作為 symbol 的 ID，所以這里傳入的 ID 即為你想顯示的圖標(biāo)的 svg 文件名，記得加上 # 。
自動導(dǎo)入
你會發(fā)現(xiàn)，這里要想插入某個圖標(biāo)，都得 import ，每用一個都要重復(fù)一遍這個流程，太麻煩，那么我們就讓 src/icons/svg/下的 svg 文件都自動導(dǎo)入吧。
webpack 可以幫我們做到：
// requires and returns all modules that match
const requireAll = requireContext => requireContext.keys().map(requireContext);
// import all svg
const req = require.context('./assets/svg', true, /\.svg$/);
requireAll(req);代碼實(shí)例:
首先在main.ts中引入import './icons/index',
icons/index.js,將icons/svg中的所有svg導(dǎo)入并注冊全局組件SvgIcon
//SvgIcon組件代碼
