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中
然后在组件中使用：
<svg class="icon" aria-hidden="true">
<use xlink:href="kitty-xxx"></use>
</svg>
复制代码
动态渲染
因为我们的Icon需要支持传入不同name展示不同图标，所以我们需要将Icon组件完善一下
首先在Icon/types中定义我们的props类型
import {
ExtractPropTypes } from 'vue'
export const iconProps = {
name: {
type: String
}
}
export type IconProps = ExtractPropTypes<typeof iconProps>
复制代码
然后将icon.vue修改为
<template>
<svg class="icon" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
</template>
<script lang="ts">
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
};
},
});
</script>
复制代码
此时我们就能根据不同name展示不同图标了
组件引入Icon
引入一个Icon就很简单了，只需要传入一个name即可,比如我们在example/App.vue中使用如下
<template>
<div>
<Icon name="edit" />
<Icon name="download" />
<Icon name="forward" />
<Icon name="history" />
<Icon name="file" />
<Icon name="link" />
<Icon name="good" />
</div>
</template>
<script lang="ts" setup>
import {
Icon } from 'kitty-ui'
</script>
<style lang="less">
.icon {
font-size: 36px;
color: #666;
margin-right: 20px;
}
</style>
复制代码
显示效果如下图
徽标提示
我们可以设置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<typeof iconProps>
复制代码
然后我们根据这两个属性来展示我们不同的徽标，icon.vue修改如下
<template>
<div class="kitty-icon">
<svg class="icon" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
<div v-if="dot" class="kitty-info" :class="styleDot">{
{
badge }}</div>
</div>
</template>
<script lang="ts">
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
};
},
});
</script>
复制代码
组件通过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中使用
<template>
<div>
<Icon name="comment" />
<Icon name="comment" dot />
<Icon name="comment" dot badge="1" />
</div>
</template>
<script lang="ts" setup>
import {
Icon } from 'kitty-ui'
</script>
<style lang="less">
.kitty-icon {
font-size: 36px;
color: #666;
margin-right: 20px;
}
</style>
复制代码
最终展示效果
图标颜色
Icon的color属性用来设置图标的颜色。这个比较好实现，这里直接通过style赋予图标颜色（不要忘记在types.ts中定义组件属性）
//icon.vue
<template>
<div class="kitty-icon">
<svg class="icon" :style="iconColor" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
</div>
</template>
<script lang="ts">
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
};
},
});
</script>
复制代码
App.vue中使用
<template>
<div>
<Icon name="favorite" color="red" />
<Icon name="favorite" color="green" />
<Icon name="favorite" color="blue" />
<Icon name="favorite" color="yellow" />
</div>
</template>
<script lang="ts" setup>
import {
Icon } from 'kitty-ui'
</script>
<style lang="less">
.kitty-icon {
font-size: 36px;
color: #666;
margin-right: 20px;
}
</style>
复制代码
效果如下
最后
到这里一个Icon组件基本也就开发完了，如果你想了解更多组件的实现，你可以关注Vite+TypeScript从零搭建Vue3组件库 - 东方小月的专栏 - 掘金 (juejin.cn),将不定期的更新一些组件的实现。同时如果你发现文中有错误的地方或者有其它改进的地方欢迎指出，大家一起学习。
源码附件已经打包好上传到百度云了，大家自行下载即可～
链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
提取码: yu27
百度云链接不稳定，随时可能会失效，大家抓紧保存哈。
如果百度云链接失效了的话，请留言告诉我，我看到后会及时更新～
开源地址
码云地址：
http://github.crmeb.net/u/defu
Github 地址：
http://github.crmeb.net/u/defu
链接：https://juejin.cn/post/7122622920433598471