大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇文章给大家分享的是有关怎么在Vue中引入svg图标,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
创新互联公司专注于网站建设|网页维护|优化|托管以及网络推广,积累了大量的网站设计与制作经验,为许多企业提供了网站定制设计服务,案例作品覆盖成都发电机回收等行业。能根据企业所处的行业与销售的产品,结合品牌形象的塑造,量身定制品质网站。Vue中引入svg图标的方式
安装
yarn add svg-sprite-loader --dev
svg组件
index.vue
注册到全局
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() } }
页面中使用
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代码
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类名
以上就是怎么在Vue中引入svg图标,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。