Icon 图标 #

Kunlun Design 提供了一套常用的图标集合。

安装 #

想要使用图标组件，你需要先安装 @kl-design/icons 图标组件包：

# 选择一个你喜欢的包管理器

# NPM
$ npm install @kl-design/icons
# Yarn
$ yarn add @kl-design/icons
# Pnpm
$ pnpm install @kl-design/icons

注册所有图标 #

你需要从 @kl-design/icons 中导入所有图标并进行全局注册:

// main.ts

import * as KlIconCpns from '@kl-design/icons'
import '@kl-design/icons/style.css'

const app = createApp(App)
for (const [key, component] of Object.entries(KlIconCpns)) {
    app.component(key, component)
}

完成这一步后，你就可以在项目的任何地方像用例一样使用图标啦。

基础用法 #

通过设置 color 和 size 属性，自定义图标的颜色和尺寸。

<template>
    <div class="kl-icon">
        <KlSystemAdd />
        <KlSystemAdd size="40" color="red" />
    </div>
</template>

注意：size 属性的单位是 px，当你指定size属性时，会将图标的宽度和高度都设置为size大小。若不设置size属性，图标的宽度和高度默认为 1.5em。

通过类自定义图标样式 #

设置className属性，自定义图标样式。

<template>
    <div class="kl-icon">
        <KlSystemAdd />
        <KlSystemAdd className="add-icon" />
    </div>
</template>

<style scoped>
.add-icon {
    height: 40px;
    width: 40px;
    color: red;
}
</style>

注意：size 和 color 属性的优先级大于 className 属性。

图标集合 #

点击图标，一键复制粘贴。

API #

属性 #

源代码 #