Icon组件想必大家都不陌生，本篇文章将为大家详细介绍Icon组件是如何实现的。如果你想了解完整的组件库搭建，你可以点击使用Vite和TypeScript带你从零打造一个属于自己的Vue3组件库。

引入字体图标

字体图标我们引用磊宇的iconfont。首先注册登录然后进入 资源管理->我的项目->新建项目，如下图

我们将前缀改为我们组件库的名字(这里可以随便命名)，后面我们的字体图标class前缀就是这里定义的。

项目建好之后我们去 素材库下的图标库找一些自己喜欢的图标添加到购物车，然后再将我们购物车的图标添加至我们的项目中

再回到我们的项目，将图标下载到我们本地，这里我们选择symbol方式引用

然后解压，这里我们只需要这些文件中的iconfont.js，我们将其复制放到我们的Icon项目下面，这里我将它放在Icon/font下。

Icon组件中使用图标

我们使用的是symbol方式引用，所以是使用是非常方便的。这是一种全新的使用方式，应该说这才是未来的主流，也是目前推荐的用法，它有以下特点

• 支持多色图标了，不再受单色限制。
• 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
• 兼容性较差，支持 ie9+,及现代浏览器。
• 浏览器渲染svg的性能一般，还不如png。

首先我们要先引入通用css样式

.icon {  width: 1em; height: 1em;  vertical-align: -0.15em;  fill: currentColor;  overflow: hidden;  }

这里我们将其放在了Icon/style/index.less中

然后在组件中使用：

动态渲染

因为我们的Icon需要支持传入不同name展示不同图标，所以我们需要将Icon组件完善一下

首先在Icon/types中定义我们的props类型

import { ExtractPropTypes } from 'vue' export const iconProps = {  name: {  type: String  } } export type IconProps = ExtractPropTypes

然后将icon.vue修改为

     import './font/iconfont.js'  import './style/index.less'  import { defineComponent, computed } from 'vue'  import { iconProps } from './types'  export default defineComponent({  props: iconProps,  setup(props) {  const iconName = computed(() => {  return `#kitty-${props.name}`  })  return {  iconName  };  },  });  " _ue_custom_node_="true">

此时我们就能根据不同name展示不同图标了

组件引入Icon

引入一个Icon就很简单了，只需要传入一个name即可,比如我们在example/App.vue中使用如下

         import { Icon } from 'kitty-ui' " _ue_custom_node_="true">.icon {  font-size: 36px;  color: #666;  margin-right: 20px; } " _ue_custom_node_="true">

显示效果如下图

徽标提示

我们可以设置dot属性后，让我们图标右上角展示一个小红点；设置badge属性后，会在图标右上角展示相应的徽标，所以我们先给我组件加两个属性：dot，badge。types.ts如下

import { ExtractPropTypes } from 'vue' export const iconProps = {  name: {  type: String  },  dot: {  type: Boolean  },  badge: {  type: String  } } export type IconProps = ExtractPropTypes

然后我们根据这两个属性来展示我们不同的徽标，icon.vue修改如下

     { { badge }}   import './font/iconfont.js'  import './style/index.less'  import { defineComponent, computed } from 'vue'  import { iconProps } from './types'  export default defineComponent({  props: iconProps,  setup(props) {  const iconName = computed(() => {  return `#kitty-${props.name}`  })  const styleDot = computed(() => {  return {  [`kitty-dot`]: props.dot && !props.badge  }  })  const badge = computed(() => {  return props.badge  })  return {  iconName,  styleDot,  badge  };  },  });  " _ue_custom_node_="true">

组件通过dot和badge来赋予徽标不同class，对应类名样式如下

.kitty-icon {  display: inline-block;  position: relative;  .kitty-info {  position: absolute;  top: 8px;  right: 0;  box-sizing: border-box;  min-width: 16px;  padding: 0 3px;  color: #fff;  font-weight: 500;  font-size: 12px;  line-height: 1.2;  text-align: center;  border: 1px solid #fff;  border-radius: 16px;  background-color: #ee0a24;  transform: translate(50%, -50%);  }  .kitty-dot {  width: 8px;  min-width: 0;  height: 8px;  background-color: #ee0a24;  border-radius: 100%;  } }

App.vue中使用

     import { Icon } from 'kitty-ui' " _ue_custom_node_="true">.kitty-icon {  font-size: 36px;  color: #666;  margin-right: 20px; } " _ue_custom_node_="true">

最终展示效果

图标颜色

Icon的color属性用来设置图标的颜色。这个比较好实现，这里直接通过style赋予图标颜色（不要忘记在types.ts中定义组件属性）

//icon.vue        import './font/iconfont.js'  import './style/index.less'  import { defineComponent, computed } from 'vue'  import { iconProps } from './types'  export default defineComponent({  props: iconProps,  setup(props) {  const iconColor = computed(() => {  return {  color: props.color  }  })  return {  iconColor  };  },  });  " _ue_custom_node_="true">

App.vue中使用

      import { Icon } from 'kitty-ui' " _ue_custom_node_="true">.kitty-icon {  font-size: 36px;  color: #666;  margin-right: 20px; } " _ue_custom_node_="true">

效果如下

最后

到这里一个Icon组件基本也就开发完了，如果你想了解更多组件的实现，你可以关注Vite+TypeScript从零搭建Vue3组件库 - 东方小月的专栏 - 掘金 (juejin.cn),将不定期的更新一些组件的实现。同时如果你发现文中有错误的地方或者有其它改进的地方欢迎指出，大家一起学习。

创作不易，你的点赞就是我的动力！如果感觉这篇文章对你有帮助的话就请点个赞吧，感谢~