@fx1422/semi-icons-lab-vue

基于 Semi Design 的 Vue 3 实验室图标组件库。这些图标是 Semi Design 的实验性图标，提供了更多样化的图标选择。

安装

# 使用 npm
npm install @fx1422/semi-icons-lab-vue

# 使用 yarn
yarn add @fx1422/semi-icons-lab-vue

# 使用 pnpm
pnpm add @fx1422/semi-icons-lab-vue

使用方法

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import { SemiIconsLab } from '@fx1422/semi-icons-lab-vue'

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

按需引入

import { IconLabHome, IconLabUser } from '@fx1422/semi-icons-lab-vue'

在组件中使用

<template>
  <div>
    <!-- 使用全局注册的图标 -->
    <semi-icon-lab-home />
    <semi-icon-lab-user />

    <!-- 使用按需引入的图标 -->
    <icon-lab-home />
    <icon-lab-user />
  </div>
</template>

<script setup lang="ts">
import { IconLabHome, IconLabUser } from '@fx1422/semi-icons-lab-vue'
</script>

图标属性

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | size | number | string | 16 | 图标大小 | | color | string | - | 图标颜色 | | spin | boolean | false | 是否旋转 | | rotate | number | 0 | 旋转角度 |

示例

<template>
  <div>
    <!-- 基础用法 -->
    <semi-icon-lab-home />
    
    <!-- 自定义大小 -->
    <semi-icon-lab-home :size="24" />
    
    <!-- 自定义颜色 -->
    <semi-icon-lab-home color="#1890ff" />
    
    <!-- 旋转动画 -->
    <semi-icon-lab-home spin />
    
    <!-- 自定义旋转角度 -->
    <semi-icon-lab-home :rotate="90" />
  </div>
</template>

实验室图标特点

实验室图标是 Semi Design 的实验性图标集合，具有以下特点：

1. 更丰富的图标样式
2. 更现代的视觉设计
3. 更灵活的定制选项
4. 持续更新和优化

与标准图标的区别

• 命名规范：所有实验室图标都以 Lab 为前缀
• 视觉风格：采用更现代的设计语言
• 使用场景：适合需要独特视觉效果的场景

版本兼容

• Vue 3.x
• TypeScript 4.x+

相关链接

• Semi Design 官网
• Semi Design GitHub
• Vue 3 文档

许可证

MIT