根據(jù)本人在項(xiàng)目的實(shí)踐提煉出來，在說svg-sprite-loader使用之前，我們先看一下具體效果:

目錄結(jié)構(gòu)

把svg圖放置在assets/icons/svg下，

/assets/icons/index.js 注入全局組件

import Vue from 'vue'import SvgIcon from '@/components/SvgIcon'Vue.component('svg-icon', SvgIcon) const req = require.context('./svg', false, /\.svg$/) const requireAll = (requireContext) => requireContext.keys().map(requireContext) requireAll(req)

在main.js引入 icons

import './assets/icons'

在components文件夾下新建兩個(gè)組件

SvgIcon 是元組件，即需要全局注冊的組件svg-icon，代碼如下

// components/SvgIcon/index.vue <template><svg:class="`${svgClass} ${spin ? 'scoped-svg-animation' : ''}`"aria-hidden="true"v-on="$listeners"><use :xlink:href="iconName" /></svg> </template> <script> export default {name: 'SvgIcon',props: {name: {type: String,required: true,},className: {type: String,default: '',},// 是否旋轉(zhuǎn)spin: {type: Boolean,default: false,},},computed: {iconName() {return `#icon-${this.name}`},svgClass() {if (this.className) {return 'scoped-svg-icon ' + this.className} else {return 'scoped-svg-icon'}},}, } </script> <style lang="less"> .scoped-svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;&.scoped-svg-animation {animation: rotate 2s linear infinite;}@keyframes rotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}&.gray {color: #666;}&.white {color: #fff;} } </style>

項(xiàng)目中使用svg-icon組件：

// /components/IconSelect/index.vue <template><div class="icon-select-wrapper"><div>當(dāng)前選擇：{{ currentIcon }}</div><el-input v-model="iconVal" placeholder="請輸入內(nèi)容"></el-input><div><ul class="icon-list"><li:class="{ active: item === currentIcon }"v-for="(item, index) in iconList":key="index"@click="selectIcon(item)"><svg-icon:class-name="item === currentIcon ? 'white' : 'gray'":name="item"style="width: 30px; height: 30px"/><span class="icon-label">{{ item }}</span></li></ul></div></div> </template> <script> import icons from './config' export default {data() {return {iconList: icons,iconVal: '',currentIcon: 'add-circle',iconClass: '',}},watch: {iconVal(val) {if (val) {this.iconList = this.iconList.filter((item) => item.indexOf(val) > -1)} else {this.iconList = icons}},},methods: {selectIcon(item) {this.currentIcon = itemthis.iconClass},}, } </script><style lang="less"> .icon-select-wrapper {width: 450px; } .icon-list {width: 450px;display: flex;flex-wrap: wrap;border-left: 1px solid #dcdfe6;border-top: 1px solid #dcdfe6;margin-top: 20px;li {width: 150px;display: flex;flex-direction: column;justify-content: center;align-items: center;border-right: 1px solid #dcdfe6;border-bottom: 1px solid #dcdfe6;padding: 10px 0;box-sizing: border-box;cursor: pointer;.icon-label {font-size: 12px;color: #666;}&.active {background: burlywood;.icon-label {font-size: 12px;color: #fff;}}} } </style>

使用require.context()方法自動(dòng)化引入所有icons下的svg，并進(jìn)行處理，取出svg的名稱；
如 add.svg --> add

// /components/IconSelect/config.js const req = require.context('@/assets/icons/svg', false, /\.svg$/) console.log(req, 'req') const requireAll = (requireContext) => requireContext.keys() const re = /\.\/(.*)\.svg/ const icons = requireAll(req).map((item) => {console.log(item, '88')return item.match(re)[1] }) console.log(icons, 'icons') export default icons

vue.config.js 配置svg-sprite-loader、svgo-loader如下：

const path = require('path') function resolve(dir) {return path.join(__dirname, dir) } module.exports = {chainWebpack: (config) => {// 不對assets/icons的svg打包c(diǎn)onfig.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/assets/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]',}).end().before('svg-sprite-loader').use('svgo-loader').loader('svgo-loader').end()}, }

總結(jié)，在這個(gè)應(yīng)用中，有如下知識點(diǎn)需要掌握了解：

1. require.context

它是webpack中的api,通過執(zhí)行require.context函數(shù)獲取一個(gè)特定的上下文,主要用來實(shí)現(xiàn)自動(dòng)化導(dǎo)入模塊,在前端工程中,如果遇到從一個(gè)文件夾引入很多模塊的情況,可以使用這個(gè)api,它會(huì)遍歷文件夾中的指定文件,然后自動(dòng)導(dǎo)入,而不需要每次調(diào)用import導(dǎo)入模塊

require.context(directory, useSubdirectories = false, regExp = /^.//);

directory: 要查找的文件路徑
useSubdirectories: 是否查找子目錄
regExp: 要匹配文件的正則

在本例中，require.context()返回的結(jié)果如下：

var map = {"./add-circle.svg": "./src/assets/icons/svg/add-circle.svg","./add.svg": "./src/assets/icons/svg/add.svg","./arrow-double-right.svg": "./src/assets/icons/svg/arrow-double-right.svg","./arrow-down.svg": "./src/assets/icons/svg/arrow-down.svg","./arrow-right.svg": "./src/assets/icons/svg/arrow-right.svg","./ashbin.svg": "./src/assets/icons/svg/ashbin.svg","./bottom.svg": "./src/assets/icons/svg/bottom.svg","./browse.svg": "./src/assets/icons/svg/browse.svg","./column-3.svg": "./src/assets/icons/svg/column-3.svg","./column-4.svg": "./src/assets/icons/svg/column-4.svg","./direction-down.svg": "./src/assets/icons/svg/direction-down.svg","./explain.svg": "./src/assets/icons/svg/explain.svg","./file-open.svg": "./src/assets/icons/svg/file-open.svg","./film.svg": "./src/assets/icons/svg/film.svg","./folder-close.svg": "./src/assets/icons/svg/folder-close.svg" };function webpackContext(req) {var id = webpackContextResolve(req);return __webpack_require__(id); } function webpackContextResolve(req) {if(!__webpack_require__.o(map, req)) {var e = new Error("Cannot find module '" + req + "'");e.code = 'MODULE_NOT_FOUND';throw e;}return map[req]; } webpackContext.keys = function webpackContextKeys() {return Object.keys(map); }; webpackContext.resolve = webpackContextResolve; module.exports = webpackContext; webpackContext.id = "./src/assets/icons/svg sync \\.svg$";

2. svg標(biāo)簽use的使用

本例中：

<svg:class="`${svgClass} ${spin ? 'scoped-svg-animation' : ''}`"aria-hidden="true"v-on="$listeners"><use :xlink:href="iconName" /> </svg>

渲染結(jié)果如下：

3. svg-sprite-loader

4. svgo-loader

總結(jié)

以上是生活随笔為你收集整理的svgsprite的svg-sprite-loader在vue中的使用及vue-cli如何配置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。