vue svg图标的使用
作者:互联网
vue svg图标的使用 油条丝 于 2019-11-09 17:27:56 发布 568 收藏 2 分类专栏: vue 文章标签: vue svg 版权 vue 专栏收录该内容 1 篇文章0 订阅 订阅专栏 1. 需要用到图标的地方加入图标标签 <el-input type="text" auto-complete="off" placeholder="账号"> <svg-icon slot="prefix" icon-class="user"/> </el-input> 2. 加入SvgIcon组件 src/components目录下加入SvgIcon组件 index.vue代码如下 <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"/> </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> 3. 引入svg图标 需要用到的图标放在src/icons/svg目录下,src/icons/index.js代码如下 import Vue from 'vue' import SvgIcon from '@/components/SvgIcon' // svg组件 // register globally Vue.component('svg-icon', SvgIcon) const requireAll = requireContext => requireContext.keys().map(requireContext) const req = require.context('./svg', false, /\.svg$/) requireAll(req) 4. 在main.js中导入 import '@/icons' // icon 5. 安装svg-sprite-loader模块 npm install svg-sprite-loader --save 6. 配置webpack.base.conf.js中加入规则 { test: /\.svg$/, loader: 'svg-sprite-loader', include: [resolve('src/icons')], options: { symbolId: 'icon-[name]' } }, 在原来的test: /\.(png|jpe?g|gif|svg)(\?.*)?$/规则下加入排除规则 exclude: [resolve('src/icons')], ———————————————— 版权声明:本文为CSDN博主「油条丝」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/sinat_38872809/article/details/102989073
标签:vue,icons,svg,图标,SvgIcon,icon 来源: https://www.cnblogs.com/webSnow/p/15867043.html