vue如何引入svg图标?教你两个办�
Admin 2021-05-24 群英技术资�
SVG是一种图像文件格式,意思为可缩放的矢量图形,是现在比较流行的图像文件格式之一,使用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" />
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="https://www.w3.org/2000/svg"> <use :xlink:href="iconName" xmlns:xlink="https://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>
文本介绍�vue引入svg图标的两种方式,需要的朋友可以参考学习,希望对大家学习有帮助,想要了解更多vue 引入svg图标的内容,可以关注其他相关文章�
文本转载自脚本之�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
本文我们来了解CocosCreator对象池的使用,对于CocosCreator对象池的使用操作具体有六个步骤,下文都有详细的介绍,感兴趣的朋友接下来就跟随小编来了解看看吧�
滚轮放大缩小的功能还是比较常见的,本文给大家分享vue中实现div内滚轮放大缩小的功能的方法,实现效果有表格可以实现放大缩小及拖拽,如下,那么具体怎样实现呢?下面我们详细的了解看看�
本文主要给大家解的是关于vue懒加载的三种方式,包括vue异步组件、ES6的import()和webpack的require.ensure(),下本有具体代码,具有一定的参加价值,大家可以参考�
拖拽元素的需求还是比较常见的,之前我们也了解过拖拽元素,这篇文章给大家分享的是用jQuery实现容器间的元素拖拽效果,具体怎样做呢?我们直接看代码�
今天给大家分享的是关于vue图片裁剪组件的内容,下文对vue图片裁剪组件的使用有详细的介绍及示例代码,有需要的朋友可以参考。本文介绍的组件是基于vue-cropper二次封装,接下来我们一起了解看看�
推荐内容
联系我们
24小时售后 � 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 � 公司总机�0668-2555555 公司传真�0668-2555000Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所� 茂名市群英网络有限公�
增值电信经营许可证 : B1.B2-20140078