Icon图标库

本页主要提供Icon图标库的使用方式介绍。

使用图标

• 如果你想像用例一样直接使用，你需要全局注册组件，才能够直接在项目里使用。

安装

使用包管理器

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

# NPM
$ npm install hive-icons-vue

# Yarn
$ yarn add hive-icons-vue

# pnpm
$ pnpm install hive-icons-vue

注册所有图标

您需要从 hive-icons-vue 中导入所有图标并进行全局注册。

// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as HiveIconsVue from 'hive-icons-vue';

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

直接使用SVG图标

<template>
  <div style="font-size: 20px">
    <!-- 由于SVG图标默认不携带任何属性 -->
    <!-- 你需要直接提供它们 -->
    <AddCost />
    <Card />
  </div>
</template>