使用Vue开发UI组件：Icon图标组件

这是 Vue 组件开发的第一篇文章，先从最简单的 Icon 组件开始，Icon 是一个在前端经常会用到的组件单元，后续的很多组件可能都有对它的依赖，所以先从 Icon 开始。

开发

这套UI的图标系统使用的是 themify-icons ，将依赖导入项目中，编写组件模板：

<template>
  <i class="sicon" :class="classes"></i>
</template>

这里最关键的就是 classes 的生成规则：

computed: {
  classes() {
    return [`ti-${this.name}`];
  }
}

从代码可以看出，因为这套UI的前缀使用了 ti- ，所以为了简洁，classes 在计算时会自动补齐前缀，用户只需要填写后续的图标名称即可。

使用

图标的使用非常简单，只需要包含 name 属性的标签即可。

<sicon name="user"></sicon>

属性：name

属性 name 对应着 themify-icons 的名称（不含前缀 ti-）。

演示

下面给出一些示例的图标样式，这些图标全部可以在UI系统中使用。