Vue中引入svg圖標(biāo)的方式
Vue中引入svg圖標(biāo)的方式一
安裝
|
1
|
yarn add svg-sprite-loader --dev |
svg組件
index.vue
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!-- svg組件 --><template> <svg class="svg-icon" :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName" /> </svg></template><script>export default { name: 'SvgIcon', props: { // svg 的名稱 svgName: { type: String, required: true } }, computed: { iconName () { return `#icon-${this.svgName}` }, svgClass () { if (this.svgName) { return 'svg-icon' + this.svgName } else { return 'svg-icon' } } }}</script><style lang="less" scoped>.svg-icon { width: 100px; height: 100px; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}</style> |
注冊(cè)到全局
index.js
|
1
2
3
4
5
6
7
8
9
|
import Vue from 'vue'import SvgIcon from '@/components/SvgIcon'// 注冊(cè)到全局Vue.component('svg-icon', SvgIcon)const requireAll = requireContext => requireContext.keys().map(requireContext)const req = require.context('./svg', false, /\.svg$/)requireAll(req) |
vue.config.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
module.exports = { chainWebpack: config => { config.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() } } |
頁面中使用
|
1
2
|
<!-- svg-name為svg名 --><svg-icon svg-name="ic_home_news" /> |
Vue中引入svg圖標(biāo)的方式二
npm install svg-sprite-loader --save-dev
vue.config.js中添加如下代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
const path = require('path');function resolve(dir) { // __dirname項(xiàng)目根目錄的絕對(duì)路徑 return path.join(__dirname, dir);}module.exports = { chainWebpack: config => { const svgRule = config.module.rule('svg'); // 清除已有的所有l(wèi)oader // 如果你不這樣做，接下來的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'); },} |
建立如下的文件目錄
SvgIcon.vue代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<template> <svg :class="svgClass" xmlns="http://www.w3.org/2000/svg"> <use :xlink:href="iconName" xmlns:xlink="http://www.w3.org/1999/xlink" /> </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> |
svg文件夾下放svg圖標(biāo)
index.js代碼
|
1
2
3
4
5
6
7
|
import Vue from 'vue';import SvgIcon from '@/components/SvgIcon'; // svg組件// register globallyVue.component('svg-icon', SvgIcon);const req = require.context('./svg', false, /\.svg$/);const requireAll = requireContext => requireContext.keys().map(requireContext);requireAll(req); |
最后在main.js中引入
|
1
|
import './icons'; |
在頁面中使用svg
icon-class是svg圖標(biāo)名 class-name是你要自定義的class類名
|
1
|
<svg-icon icon-class="features_ic_risk@1x" class-name="icon"></svg-icon> |
總結(jié)
到此這篇關(guān)于Vue中引入svg圖標(biāo)的兩種方式的文章就介紹到這了,更多相關(guān)Vue引入svg圖標(biāo)內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/weixin_53430951/article/details/112525341
