pzy-react-iconfont

作用

在线方式使用iconfont图标

源代码仓库: Gitee

npm资源: npm

在线示例: 在线示例

原理

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

IconFont组件属性说明

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

使用示例

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的监听

npm start # or yarn start

执行tsdx打包

npm build # or yarn build

运行storybook

npm storybook # or yarn storybook

storybook打包

npm build-storybook # or yarn build-storybook

将组件上传npm

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