# pzy-react-iconfont

**Repository Path**: free_pan/pzy-react-iconfont

## Basic Information

- **Project Name**: pzy-react-iconfont
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-16
- **Last Updated**: 2021-03-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# pzy-react-iconfont

## 作用

在线方式使用iconfont图标

源代码仓库: [Gitee](https://gitee.com/free_pan/pzy-react-iconfont)

npm资源: [npm](https://www.npmjs.com/package/pzy-react-iconfont)

在线示例: [在线示例](http://free_pan.gitee.io/pzy-react-iconfont)

## 原理

* 接收`scriptUrl`参数(为iconfont的symbol的js地址)，自动创建一个script标签
* 根据传入的`type`参数(为iconfont的图标标识)，自动创建一个svg标签

## IconFont组件属性说明

| 属性名 | 类型 | 说明 |
| ------ | ------ | ------ |
| type | string | iconfont图标标识(必须) |
| className | string | 应用到该图标上的class(可选) |
| style | CSSProperties | 独立的style样式(可选) |

## 使用示例

```tsx
const IconFont = createFromIconfontCN('//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js');
<IconFont type="icon-tuichu" style={{fill:'red'}}/>
```

## storybook编写注意事项

**文件名必须与导出的自定义组件同名, 否则无法生成属性信息.**

即: 组件文件名为:`Button.tsx`, 那么该文件内部也必须`export default Button`, 如果不这样无法生成属性列表

**编写storybook时, 必须引用组件的源文件, 而不能使用引用的引用, 否则无法生成属性信息**

即: 如果有组件:`src/lib/button/Button.tsx`, 在`src/index.tsx`导出了该组件, 如果编写`storybook`时, 引入的是`src/index.tsx`那么将无法生成属性列表, 必须引用`src/lib/button/Button.tsx`才行

## 目录说明

```
src                     # 源代码目录
|-index.tsx             # 只有在该文件导出的组件,才能被用户引用
|-index.config.ts       # ts配置文件
stories                 # storybook目录
example                 # 自行调用实验目录(基于parcel)
main.ts                 # storybook配置文件
manager.js              # storybook配置文件
YourTheme.js            # storybook配置文件
tsdx.config.js          # tsdx配置文件
tsconfig.json           # ts配置文件
```

## 命令说明

### 运行tsdx的监听

```bash
npm start # or yarn start
```

### 执行tsdx打包

```bash
npm build # or yarn build
```

### 运行storybook

```bash
npm storybook # or yarn storybook
```

### storybook打包

```bash
npm build-storybook # or yarn build-storybook
```

## 将组件上传npm

```bash
yarn build
npm login # npm登录
npm pub # 组件发布
```