color-message-aibox-vue

color-message-aibox-vue

Aibox 图标集的 Vue 3 组件库。

📦 安装

pnpm add color-message-aibox-vue
# 或
pnpm add color-message-aibox-vue
# 或
yarn add color-message-aibox-vue

🚀 快速开始

按需引入（推荐）

<script setup>
import { IconAdd, IconDelete } from 'color-message-aibox-vue'
</script>

<template>
  <div>
    <IconAdd />
    <IconDelete />
  </div>
</template>

全局注册

// main.ts
import { createApp } from 'vue'
import AiboxIcons from 'color-message-aibox-vue/global'
import App from './App.vue'

const app = createApp(App)
app.use(AiboxIcons)
app.mount('#app')

在组件中使用：

<template>
  <div>
    <icon-add />
    <icon-delete />
  </div>
</template>

🎨 自定义样式

<template>
  <IconAdd style="width: 32px; height: 32px; color: #409eff;" class="my-icon" />
</template>

<style scoped>
.my-icon {
  cursor: pointer;
  transition: color 0.3s;
}

.my-icon:hover {
  color: #66b1ff;
}
</style>

📚 图标列表

当前包含以下图标：

• IconAdd - 添加图标
• IconDelete - 删除图标

🔧 TypeScript 支持

本包使用 TypeScript 编写，提供完整的类型定义，开箱即用。

📄 License

MIT License