• vue管理系统从0到1-icon组件
  • Artiely
  • #vue
  • 2020-06-12
  • 106
  • 1 min read
  • loading...

vue管理系统从0到1-icon组件

什么是iconfont

iconfont ,图标字体,也叫字体图标,顾名思义,就是字体做的图标。受到近些年 扁平化设计 的影响,越来越多的图标都开始使用 iconfont

特色

  • 自由的变化大小,且不会模糊
  • 比图片小,加载快
  • 可以任意改变颜色
  • 支持单色和多色
  • 好管理维护

准备

https://www.iconfont.cn/
iconfont账号

代码

创建组件src/packages/icon/Icon.vue

<template>
  <svg class="icon" aria-hidden="true" v-if="symbol">
    <use :xlink:href="'#' + name" />
  </svg>
  <i v-else class="iconfont" :class="name" />
</template>
<script>
export default {
  name: 'Icon',
  props: {
    name: {
      type: String,
      default: '',
    },
    symbol: {
      type: Boolean,
      default: false,
    },
  },
}
</script>
<style lang="less">
@import '//at.alicdn.com/t/font_1859884_w16rarqf4f.css';
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
复制成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

....