本篇文章給大家分享的是有關(guān)怎么在Vue中引入svg圖標(biāo),小編覺(jué)得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說(shuō),跟著小編一起來(lái)看看吧。
創(chuàng)新互聯(lián)公司專注于網(wǎng)站建設(shè)|網(wǎng)頁(yè)維護(hù)|優(yōu)化|托管以及網(wǎng)絡(luò)推廣,積累了大量的網(wǎng)站設(shè)計(jì)與制作經(jīng)驗(yàn),為許多企業(yè)提供了網(wǎng)站定制設(shè)計(jì)服務(wù),案例作品覆蓋成都發(fā)電機(jī)回收等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品,結(jié)合品牌形象的塑造,量身定制品質(zhì)網(wǎng)站。Vue中引入svg圖標(biāo)的方式
安裝
yarn add svg-sprite-loader --dev
svg組件
index.vue
<!-- 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
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
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() } }
頁(yè)面中使用
<!-- svg-name為svg名 --> <svg-icon svg-name="ic_home_news" />
npm install svg-sprite-loader --save-dev
vue.config.js中添加如下代碼
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 // 如果你不這樣做,接下來(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'); }, }
建立如下的文件目錄
SvgIcon.vue代碼
<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代碼
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);
最后在main.js中引入
import './icons';
在頁(yè)面中使用svg
icon-class是svg圖標(biāo)名 class-name是你要自定義的class類名
<svg-icon icon-class="features_ic_risk@1x" class-name="icon"></svg-icon>
以上就是怎么在Vue中引入svg圖標(biāo),小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
文章名稱:怎么在Vue中引入svg圖標(biāo)-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址:http://muchs.cn/article32/eepsc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營(yíng)銷推廣、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、微信公眾號(hào)、關(guān)鍵詞優(yōu)化、虛擬主機(jī)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容