@lego-mobile/icon v0.0.3

Icon

语义化的矢量图形。

安装

npm install @lego-mobile/icon --save
# or
yarn add @lego-mobile/icon

基本使用

通过 @lego-mobile/icon 引用 Icon 组件，不同主题的 Icon 组件名为图标名加主题做为后缀。

使用 icon-font

通过设置 iconFontUrl，使用组件。

使用案例

自定义Icon图标，通过svg传入Component。

聊TA首页快捷入口。

API

自定义 Iconfont 图标

参照 @ant-design/icons，提供 createFromIconfont 方法，方便开发者调用在 iconfont.cn 上自行管理的图标。

其本质上是组件在渲染前会自动引入 iconfont.cn 项目中的图标符号集，并且创建了一个 <use> 标签来渲染图标的组件。

详见 iconfont.cn 使用帮助 查看如何生成symbol代码的 js 地址。

import Icon from '@lego-mobile/icon';

const iconFontUrl = '//at.alicdn.com/t/font_231705_2jvwx00c2ym.js';

ReactDOM.render(
  <div className="grid">
    <Icon type="eclipse" iconFontUrl={iconFontUrl} />
    <Icon type="up" iconFontUrl={iconFontUrl} />
    <Icon type="left" iconFontUrl={iconFontUrl} />
  </div>
, mountNode);

自定义 SVG 图标

可以通过配置 svgr 来将 svg 图标作为 React 组件导入。

本示例以 webpack 为参考，使用 @svgr/webpack 来实现，其他实现方式请参阅 svgr 文档。

// webpack.config.js
{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
},

import Icon from '@lego-mobile/icon';
import { ReactComponent as YourSvg } from 'path/to/yourSvg.svg'; // path to your '*.svg' file.

ReactDOM.render(<Icon component={YourSvg} />, mountNode);