一、講原理svg-sprite，和css-sprite有點(diǎn)像，就是先把所有的svg圖放頁(yè)面上，但是不現(xiàn)實(shí)，用的時(shí)候去取。

官方說(shuō)法：

symbol元素用來(lái)定義一個(gè)圖形模板對(duì)象，它可以用一個(gè)元素實(shí)例化。symbol元素對(duì)圖形的作用是在同一文檔中多次使用，添加結(jié)構(gòu)和語(yǔ)義。結(jié)構(gòu)豐富的文檔可以更生動(dòng)地呈現(xiàn)出來(lái)，類(lèi)似講演稿或盲文，從而提升了可訪問(wèn)性。注意，一個(gè)symbol元素本身是不呈現(xiàn)的。只有symbol元素的實(shí)例(亦即，一個(gè)引用了symbol的?元素)才能呈現(xiàn)。

聯(lián)系一下我剛才說(shuō)的svg-sprite你就知道了，就是我們要把我們所有svg的單個(gè)放到這個(gè)標(biāo)簽里，然后再起個(gè)ID,用的時(shí)候一找這個(gè)id就出來(lái)。非常完美。原理還有更有深度的東西可以自己百度去吧。

那我們要用時(shí)候不能挨個(gè)寫(xiě)標(biāo)簽，挨個(gè)放進(jìn)去吧，那就太麻煩了，所有用這個(gè)插件svg-sprite-loader，我們只需要準(zhǔn)備下svg圖，然后起個(gè)好記的名字。然后svg是美工給你的，所以你只需要改名字。。為了就是這個(gè)，要不誰(shuí)用他

npm?install?svg-sprite-loader?--save-dev

接下來(lái)在vue.config.js里加這些東西。上代碼

先找到這個(gè)位置

這個(gè)位置是配置webpack額外配置的，因?yàn)関ue-cli3已經(jīng)幫你配置好了，但是對(duì)于這需求各種變的年代。不改是不可能的，還不如在webpack里配置呢。。吐槽一下。接下來(lái)就把下邊這些代碼放進(jìn)去

const svgRule = config.module.rule('svg');

// 清除已有的所有 loader。

// 如果你不這樣做，接下來(lái)的 loader 會(huì)附加在該規(guī)則現(xiàn)有的 loader 之后。

svgRule.uses.clear();

svgRule

.test(/\.svg$/)

.include.add(path.resolve(__dirname, './src/icons/svg'))

.end()

.use('svg-sprite-loader')

.loader('svg-sprite-loader')

.options({

symbolId: 'icon-[name]'

});

const fileRule = config.module.rule('file');

fileRule.uses.clear();

fileRule

.test(/\.svg$/)

.exclude.add(path.resolve(__dirname, './src/icons/svg'))

.end()

.use('file-loader')

.loader('file-loader');

你不要納悶，為啥配置這svg的規(guī)則又配置了下file,這個(gè)就是坑。

來(lái)先看一下package.json

這個(gè)開(kāi)發(fā)依賴(lài)也沒(méi)有file-loader啊，配置他干嘛。。我就為了這個(gè)都哭，看著沒(méi)有，實(shí)際上有，就是這些vue/cli的某個(gè)的以來(lái)還是用的是file-loader所以你要是不配置的話，就會(huì)有兩個(gè)東西去處理你的svg，文件。他會(huì)告訴你需要你一個(gè)loader,實(shí)際上你有倆。

此時(shí)按我這個(gè)配置就可以了。為了證明有，你看看這個(gè)。。

然后自己寫(xiě)個(gè)組件。，再用webpack的

require.context方法把那些svg導(dǎo)入進(jìn)來(lái)。這個(gè)方法作用就是把所有的svg億import形式引入進(jìn)來(lái)。

看代碼

先看組件

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';

}

}

}

};

.svg-icon {

width: 1em;

height: 1em;

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;

}

用的時(shí)候就是icon-class里的就是svg你開(kāi)始的命名，別整中文啊。后邊這個(gè)class-name就是你自定義的class,要設(shè)置大小記得font-size可別width,height啥的。。那就很尷尬了

接下來(lái)就是如何引入的svg的進(jìn)入頁(yè)面的

import Vue from 'vue';

import SvgIcon from '@/components/SvgIcon'; // svg組件

// register globally

Vue.component('svg-icon', SvgIcon);

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

const requireAll = requireContext => requireContext.keys().map(requireContext);

requireAll(req);

先把組件全局注冊(cè)，然后引入組件；

如果看不懂就直接百度require.context然后你就懂了。

這個(gè)時(shí)候再去main.js里引入就好了。(別忘了這一步)

import './icons'; // icon

你就可以用了，而且是頁(yè)面各個(gè)角度的用。你要看一下dom結(jié)構(gòu)有沒(méi)有這個(gè)。

有你就大膽用吧，啥毛病沒(méi)有，沒(méi)有的話，是不是你svg名字給寫(xiě)錯(cuò)了。其他都沒(méi)錯(cuò)了還是不顯示就去檢查這個(gè)webpack的配置吧和控制臺(tái)的錯(cuò)誤輸出。其他就只有碰到了才清楚。

現(xiàn)在最新版給的方法是這個(gè)(先別急著用)

1.在對(duì)應(yīng)vue項(xiàng)目里添加插件

vue?add svg-sprite

2.再執(zhí)行：

npm?install?svgo svgo-loader?--save-dev

這里開(kāi)發(fā)以來(lái)會(huì)增加一個(gè)vue-cli-svg-sprite和svgo和svgo-loader

因?yàn)閟vgo可以整理svg的某些東西，去掉或者增加，反正是可以批量處理他們，以方便我們使用。他會(huì)給我們自動(dòng)生成一個(gè)已經(jīng)寫(xiě)好的組件? 到時(shí)候你引入這個(gè)組件就可以了。我的情況就是沒(méi)找到原因就是一直不顯示還不報(bào)錯(cuò)。so,我拋棄了他，使用了上邊的方法，實(shí)際上vue-cli-svg-sprite的依賴(lài)也是svg-sprite-loader，沒(méi)準(zhǔn)問(wèn)題也是file-loader的事，應(yīng)該是我的某些配置問(wèn)題。如果有大神知道原因，希望你告訴我一下吧。最近沒(méi)空去探尋真理，實(shí)現(xiàn)了先用。

總結(jié)

以上是生活随笔為你收集整理的vuecli3的svgicon_vue-cli3引入svg图标全过程以及遇到的坑的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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