前端开发必备:icon封装技巧

main.js
import svgIcon from '@/components/SvgIcon'
Vue.component('svg-icon-full', svgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('@/assets/icons/svg', false, /\.svg$/)  // icon位置
requireAll(req)
SvgIcon组件
<template>
  <i v-if="iconFileName.indexOf('el-icon-') === 0" :class="iconFileName" />
  <svg v-else class="svg-icon" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="`#icon-${iconFileName}`" rel="external nofollow" :class="[iconColor]"/>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconFileName: {
      type: String,
      required: true
    },
    iconColor: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  overflow: hidden;
  vertical-align: -0.15em;
  fill: currentColor;
}
</style>
SvgIcon调用

icon-file-name="文件名"

<svg-icon-full icon-file-name="alarm" :style="{width: '14px', height: '14px', color: '#FF4621'}"/>
相关推荐
&岁月不待人&几秒前
Kotlin by lazy和lateinit的使用及区别
android·开发语言·kotlin
StayInLove4 分钟前
G1垃圾回收器日志详解
java·开发语言
无尽的大道12 分钟前
Java字符串深度解析:String的实现、常量池与性能优化
java·开发语言·性能优化
爱吃生蚝的于勒15 分钟前
深入学习指针(5)!!!!!!!!!!!!!!!
c语言·开发语言·数据结构·学习·计算机网络·算法
binishuaio25 分钟前
Java 第11天 (git版本控制器基础用法)
java·开发语言·git
zz.YE26 分钟前
【Java SE】StringBuffer
java·开发语言
就是有点傻31 分钟前
WPF中的依赖属性
开发语言·wpf
洋24039 分钟前
C语言常用标准库函数
c语言·开发语言
进击的六角龙41 分钟前
Python中处理Excel的基本概念(如工作簿、工作表等)
开发语言·python·excel
wrx繁星点点42 分钟前
状态模式(State Pattern)详解
java·开发语言·ui·设计模式·状态模式