兴国资源网 Design By www.nnzcdc.com
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', false, /\.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>
总结
兴国资源网 Design By www.nnzcdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
兴国资源网 Design By www.nnzcdc.com
暂无评论...
更新日志
2024年05月20日
2024年05月20日
- 张琍敏1978-雪中莲[台湾复刻版][WAV+CUE]
- 叶蕴仪1993-睡美人[日本版][WAV+CUE]
- 夜晚助兴音乐-群星《新时代床头音乐-性能量》2CD[WAV]
- 24K德国HD金碟《历届奥斯卡获奖金曲》3CD[WAV整轨]
- 邰正宵《重燃爱恋 贰 Walk On》[FLAC/分轨][431.72MB]
- 苏文劭《雨停出来走走》[320K/MP3][81.11MB]
- 苏文劭《雨停出来走走》[FLAC/分轨][210.76MB]
- 群星《2024好听新歌04》十倍音质WAV分轨
- 陈宁《弹指之间HQ》头版限量[低速原抓WAV+CUE]
- 陈宁《故人还》HQCDII限量签名版[低速原抓WAV+CUE]
- 苏文劭《春曲(Lessons)》[320K/MP3][39.8MB]
- 苏文劭《春曲(Lessons)》[FLAC/分轨][97.78MB]
- 群星《2006香港高级视听展原音精选 SACD》[ISO][2G]
- 张琍敏1977-枫林小雨[台湾复刻版][WAV+CUE]
- 林一峰2014-COOKINGMUSIC[香港首版][WAV+CUE]