npm package: @frameui/fui-icon
Description: FrameUI Icon
Author: FrameUI
Latest version: 2.0.2

# FuiIcon - Vue 3 图标组件库

[![npm version](https://img.shields.io/npm/v/fui-icon.svg)](https://www.npmjs.com/package/fui-icon)
[![npm downloads](https://img.shields.io/npm/dm/fui-icon.svg)](https://www.npmjs.com/package/fui-icon)
[![Vue](https://img.shields.io/badge/Vue-3.x-brightgreen.svg)](https://vuejs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue.svg)](https://www.typescriptlang.org/)
[![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)

一个基于 Vue 3 + TypeScript 的现代化图标组件库，支持 RemixIcon 图标集、自定义 SVG 图标和外部图片图标。

## ✨ 特性

- 🚀 **Vue 3 原生支持** - 基于 Vue 3 Composition API 构建
- 🎨 **多种图标类型** - 支持 RemixIcon、自定义 SVG、外部图片
- 📱 **响应式设计** - 支持多种尺寸和自定义样式
- 🔧 **TypeScript 支持** - 完整的类型定义和智能提示
- 🎯 **轻量级** - 按需加载，不增加包体积
- 🎨 **主题定制** - 支持 CSS 变量和自定义样式
- ♿ **无障碍支持** - 内置 ARIA 属性支持

## 📦 安装

```bash
# 使用 npm
npm install fui-icon

# 使用 yarn
yarn add fui-icon

# 使用 pnpm
pnpm add fui-icon
```

## 🚀 快速开始

### 全局注册

```typescript
import { createApp } from 'vue'
import FuiIcon from 'fui-icon'
import 'fui-icon/dist/fui-icon.css'

const app = createApp(App)
app.use(FuiIcon)
app.mount('#app')
```

### 按需引入

```vue
<template>
  <div>
    <!-- RemixIcon 图标 -->
    <FuiIcon icon="home" />
    
    <!-- 自定义 SVG 图标 -->
    <FuiIcon icon="custom-icon" :is-custom-svg="true" />
    
    <!-- 外部图片图标 -->
    <FuiIcon icon="https://example.com/icon.png" />
  </div>
</template>

<script setup lang="ts">
import { FuiIcon } from 'fui-icon'
import 'fui-icon/dist/fui-icon.css'
</script>
```

## 📚 API 文档

### Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `icon` | `string` | - | **必填** 图标名称或 URL |
| `isCustomSvg` | `boolean` | `false` | 是否为自定义 SVG 图标 |
| `className` | `string` | `''` | 自定义 CSS 类名 |

### 图标类型

#### 1. RemixIcon 图标（默认）

```vue
<template>
  <FuiIcon icon="home" />
  <FuiIcon icon="user" />
  <FuiIcon icon="settings" />
</template>
```

#### 2. 自定义 SVG 图标

```vue
<template>
  <FuiIcon icon="my-custom-icon" :is-custom-svg="true" />
</template>
```

#### 3. 外部图片图标

```vue
<template>
  <FuiIcon icon="https://example.com/icon.png" />
  <FuiIcon icon="data:image/svg+xml;base64,..." />
</template>
```

### 尺寸和样式

组件支持通过 CSS 变量自定义尺寸：

```css
:root {
  --el-font-size-big: 16px; /* 默认尺寸 */
}

/* 自定义尺寸 */
.custom-size {
  --el-font-size-big: 24px;
}
```

### 自定义样式

```vue
<template>
  <FuiIcon 
    icon="home" 
    class-name="custom-icon"
    style="color: #ff6b6b; font-size: 20px;"
  />
</template>

<style>
.custom-icon {
  color: #4ecdc4;
  transition: all 0.3s ease;
}

.custom-icon:hover {
  transform: scale(1.2);
  color: #45b7aa;
}
</style>
```

## 🎨 图标示例

### 常用图标

```vue
<template>
  <div class="icon-grid">
    <FuiIcon icon="home" />
    <FuiIcon icon="user" />
    <FuiIcon icon="settings" />
    <FuiIcon icon="search" />
    <FuiIcon icon="heart" />
    <FuiIcon icon="star" />
    <FuiIcon icon="download" />
    <FuiIcon icon="upload" />
    <FuiIcon icon="edit" />
    <FuiIcon icon="delete" />
  </div>
</template>

<style>
.icon-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  padding: 20px;
}

.icon-grid .fui-icon {
  font-size: 24px;
  text-align: center;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.icon-grid .fui-icon:hover {
  background-color: #f5f5f5;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>
```

## 🔧 开发

### 本地开发

```bash
# 克隆项目
git clone <repository-url>
cd fui-icon

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览构建结果
npm run preview
```

### 项目结构

```
fui-icon/
├── src/
│   ├── components/          # Vue 组件
│   │   └── FuiIcon.vue     # 主图标组件
│   ├── styles/              # 样式文件
│   │   └── index.scss       # 主样式文件
│   ├── types/               # TypeScript 类型定义
│   │   └── index.ts         # 类型导出
│   └── index.ts             # 主入口文件
├── dist/                    # 构建输出目录
├── scripts/                 # 构建脚本
└── package.json             # 项目配置
```

## 📋 浏览器支持

- Chrome >= 88
- Firefox >= 85
- Safari >= 14
- Edge >= 88

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/amazing-feature`)
3. 提交更改 (`git commit -m 'Add some amazing feature'`)
4. 推送到分支 (`git push origin feature/amazing-feature`)
5. 打开 Pull Request

## 📄 许可证

本项目基于 [MIT](LICENSE) 许可证开源。

## 🙏 致谢

- [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架
- [RemixIcon](https://remixicon.com/) - 优秀的图标库
- [TypeScript](https://www.typescriptlang.org/) - JavaScript 的超集

## 📞 联系方式

如有问题或建议，请通过以下方式联系：

- 提交 [Issue](https://github.com/your-username/fui-icon/issues)
- 发送邮件至：your-email@example.com

---

⭐ 如果这个项目对你有帮助，请给它一个星标！