Vue中引入svg圖示的兩種方式
阿新 • • 發佈:2021-01-18
Vue中引入svg圖示的方式
Vue中引入svg圖示的方式一
安裝
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>
註冊到全域性
index.js
import Vue from 'vue' import SvgIcon from '@/components/SvgIcon' // 註冊到全域性 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() } }
頁面中使用
<!-- svg-name為svg名 --> <svg-icon svg-name="ic_home_news" />
Vue中引入svg圖示的方式二
npm install svg-sprite-loader --save-dev
vue.config.js中新增如下程式碼
const path = require('path'); function resolve(dir) { // __dirname專案根目錄的絕對路徑 return path.join(__dirname,dir); } module.exports = { chainWebpack: config => { const svgRule = config.module.rule('svg'); // 清除已有的所有loader // 如果你不這樣做,接下來的loader會附加在該規則現有的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圖示
index.js程式碼
import Vue from 'vue'; import SvgIcon from '@/components/SvgIcon'; // svg元件 // register globally Vue.component('svg-icon',SvgIcon); const req = require.context('./svg',/\.svg$/); const requireAll = requireContext => requireContext.keys().map(requireContext); requireAll(req);
最後在main.js中引入
import './icons';
在頁面中使用svg
icon-class是svg圖示名 class-name是你要自定義的class類名
<svg-icon icon-class="features_ic_risk@1x" class-name="icon"></svg-icon>
總結
到此這篇關於Vue中引入svg圖示的兩種方式的文章就介紹到這了,更多相關Vue引入svg圖示內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!