Icon #

Kunlun Design provides a set of common icons.

Install #

To use icons, you need to install the @kl-design/icons icon package:

# Choose a package manager you like

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

Register all icons #

You need to import all the icons from @kl-design/icons and globally register them:

// 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)
}

Once this is done, you can use the icon as a use case anywhere in your project.

Basic usage #

Customize the color and size of the icon by setting the color and size properties.

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

Note: The unit of the size property is px. When you specify the size property, it sets the width and height of the icon to the size. If the size attribute is not set, the width and height of the icon default to 1.5em.

Customize icon styles through classes #

Set the className property to customize the icon style.

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

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

Note: The 'size' and 'color' attributes have higher precedence than the 'className' attributes.

Icon set #

Click on the icon and copy and paste with one click.

API #

Attributes #

Source code #