@bimdos/icon/README.md

跨框架图标库，支持 React、Vue、Angular、AngularJS、小程序等多种使用方式

# @bimdos/icon

跨框架图标库，支持 React、Vue、Angular、AngularJS、小程序、Web 等多种使用方式。

## 🚀 安装

```bash
# npm
npm install @bimdos/icon

# yarn
yarn add @bimdos/icon

# pnpm
pnpm add @bimdos/icon
```

## 📦 使用方式

### 1. React 组件

```bash
npm install @bimdos/icon react
```

```jsx
import { BimdosIcon } from "@bimdos/icon/react";

function App() {
  return (
    <div>
      <BimdosIcon name="up" size={24} color="#333" />
      <BimdosIcon name="down" size="2rem" />
    </div>
  );
}
```

### 2. Vue 组件

```bash
npm install @bimdos/icon vue
```

```vue
<template>
  <div>
    <BimdosIcon name="up" :size="24" color="#333" />
    <BimdosIcon name="down" size="2rem" />
  </div>
</template>

<script>
import { BimdosIcon } from "@bimdos/icon/vue";

export default {
  components: { BimdosIcon },
};
</script>
```

### 3. AngularJS 指令

```bash
npm install @bimdos/icon angular
```

```html
<!-- 引入脚本 -->
<script src="node_modules/@bimdos/icon/dist/angularjs/bimdos-icon.js"></script>
<script src="node_modules/@bimdos/icon/dist/angularjs/bimdos-icon-service.js"></script>
```

```javascript
// 注入模块
angular.module("yourApp", ["bimdosIcon"]);
```

```html
<!-- 使用指令 -->
<bimdos-icon name="up" size="24" color="#333"></bimdos-icon>
<bimdos-icon name="{{ iconName }}" size="{{ iconSize }}"></bimdos-icon>
```

### 4. 字体图标

```html
<link
  rel="stylesheet"
  href="node_modules/@bimdos/icon/dist/bimdos-icon-font.css"
/>

<i class="bimdos-icon bimdos-icon-up"></i>
<i class="bimdos-icon bimdos-icon-down"></i>
```

### 5. SVG 图标

```html
<link rel="stylesheet" href="node_modules/@bimdos/icon/dist/bimdos-icon.css" />

<span class="bimdos-icon bimdos-icon-up"></span>
<span class="bimdos-icon bimdos-icon-down"></span>
```

### 6. 通用 JavaScript API

```javascript
const { getIcon, getIconNames, generateSvg } = require("@bimdos/icon");

// 获取图标数据
const iconData = getIcon("up");

// 获取所有图标名称
const iconNames = getIconNames();

// 生成 SVG 字符串
const svgString = generateSvg("down", {
  size: 24,
  color: "#007bff",
  className: "my-icon",
});
```

## 📁 包结构