FuiIcon - Vue 3 图标组件库

一个基于 Vue 3 + TypeScript 的现代化图标组件库，支持 RemixIcon 图标集、自定义 SVG 图标和外部图片图标。

✨ 特性

• 🚀 Vue 3 原生支持 - 基于 Vue 3 Composition API 构建
• 🎨 多种图标类型 - 支持 RemixIcon、自定义 SVG、外部图片
• 📱 响应式设计 - 支持多种尺寸和自定义样式
• 🔧 TypeScript 支持 - 完整的类型定义和智能提示
• 🎯 轻量级 - 按需加载，不增加包体积
• 🎨 主题定制 - 支持 CSS 变量和自定义样式
• ♿ 无障碍支持 - 内置 ARIA 属性支持

📦 安装

# 使用 npm
npm install fui-icon

# 使用 yarn
yarn add fui-icon

# 使用 pnpm
pnpm add fui-icon

🚀 快速开始

全局注册

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')

按需引入

<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 图标（默认）

<template>
  <FuiIcon icon="home" />
  <FuiIcon icon="user" />
  <FuiIcon icon="settings" />
</template>

2. 自定义 SVG 图标

<template>
  <FuiIcon icon="my-custom-icon" :is-custom-svg="true" />
</template>

3. 外部图片图标

<template>
  <FuiIcon icon="https://example.com/icon.png" />
  <FuiIcon icon="data:image/svg+xml;base64,..." />
</template>

尺寸和样式

组件支持通过 CSS 变量自定义尺寸：

:root {
  --el-font-size-big: 16px; /* 默认尺寸 */
}

/* 自定义尺寸 */
.custom-size {
  --el-font-size-big: 24px;
}

自定义样式

<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>

🎨 图标示例

常用图标

<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>

🔧 开发

本地开发

# 克隆项目
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 许可证开源。

🙏 致谢

• Vue.js - 渐进式 JavaScript 框架
• RemixIcon - 优秀的图标库
• TypeScript - JavaScript 的超集

📞 联系方式

如有问题或建议，请通过以下方式联系：

• 提交 Issue
• 发送邮件至：[email protected]

⭐ 如果这个项目对你有帮助，请给它一个星标！