VUE-cli3使用 svg-sprite-loader

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:06:01

VUE-cli3使用 svg-sprite-loader

VUE-cli3使用 svg-sprite-loader:VUE-cli3使用 svg-sprite-loader svg-sprite-loader 的插件，用來根據(jù)導(dǎo)入的 svg 文件自動(dòng)生成 symbol 標(biāo)簽并插入 html，接下來就可以在模版中方便地使用 svg-sprite 技術(shù)了。使用 svg-sprite 的好處頁面代碼清爽可使用 ID 隨處重復(fù)調(diào)

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀VUE-cli3使用 svg-sprite-loader:VUE-cli3使用 svg-sprite-loader svg-sprite-loader 的插件，用來根據(jù)導(dǎo)入的 svg 文件自動(dòng)生成 symbol 標(biāo)簽并插入 html，接下來就可以在模版中方便地使用 svg-sprite 技術(shù)了。使用 svg-sprite 的好處頁面代碼清爽可使用 ID 隨處重復(fù)調(diào)

VUE-cli3使用 svg-sprite-loader

svg-sprite-loader 的插件，用來根據(jù)導(dǎo)入的 svg 文件自動(dòng)生成 symbol 標(biāo)簽并插入 html，接下來就可以在模版中方便地使用 svg-sprite 技術(shù)了。

使用 svg-sprite 的好處

頁面代碼清爽

可使用 ID 隨處重復(fù)調(diào)用

每個(gè) 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]'
 // }
 // }]
 // }]
 // }
 })
}

這時(shí)候發(fā)現(xiàn)還是不行啊， body 中并沒有看到 symbol 標(biāo)簽。

就是說只有我們自己引入的 svg 文件需要經(jīng)過 svg-sprite-loader，那么就將這些 svg 統(tǒng)一放到一個(gè)目錄下，我這里放到了 src/icons

然后要在用到的地方引入需要的svg

import './src/icon/target.svg';

重新啟動(dòng)項(xiàng)目，終于在 html 中看到了 symbol 標(biāo)簽！

配置好了，就可以用了。使用方法很簡(jiǎn)單，相較于原來插入 svg 圖標(biāo)的方法（img src 或?qū)?svg 整個(gè)寫入 html），用 svg-sprite 更加簡(jiǎn)單且清爽：

<svg><use xlink:href="#target" /></svg>

嗯，就這樣短短一行。 xlink:href 中傳入 svg ID 就好了，由于在上面的配置文件中我們直接使用文件名作為 symbol 的 ID，所以這里傳入的 ID 即為你想顯示的圖標(biāo)的 svg 文件名，記得加上 # 。

自動(dòng)導(dǎo)入

你會(huì)發(fā)現(xiàn)，這里要想插入某個(gè)圖標(biāo)，都得 import ，每用一個(gè)都要重復(fù)一遍這個(gè)流程，太麻煩，那么我們就讓 src/icons/svg/下的 svg 文件都自動(dòng)導(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)入并注冊(cè)全局組件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>

接下來就可以使用組建了