Icon 图标

图标的命名规范

• 实心和描线图标保持同名，用 -o 来区分，比如 question-circle(实心) 和 question-circle-o(描线)；

• 命名顺序：[icon名]-[形状可选]-[描线与否]-[方向可选]。

如何使用 (WEB 版)

npm install svg-sprite-loader@0.3.1 -D

Tip: 我们使用 svg-sprite-loader 方案来实现图标 sprite 效果，

antd-mobile@1.x 必须使用 svg-sprite-loader@^0.3.1 , 请看 相关信息

如果使用纯粹的 webpack ，配置如下：

const path = require('path');
const svgDirs = [
  require.resolve('antd-mobile').replace(/warn\.js$/, ''),  // 1. 属于 antd-mobile 内置 svg 文件
  // path.resolve(__dirname, 'src/my-project-svg-foler'),  // 2. 自己私人的 svg 存放目录
];
module.exports = {
  module: {
    loaders: [
      {
        test: /\.(svg)$/i,
        loader: 'svg-sprite',
        include: svgDirs,  // 把 svgDirs 路径下的所有 svg 文件交给 svg-sprite-loader 插件处理
      },
    ]
  }
};

如果使用 atool-build 作为构建工具，webpack.config.js 文件写法稍有不同，配置如下：

const path = require('path');
module.exports = function(webpackConfig, env) {
const svgDirs = [
  require.resolve('antd-mobile').replace(/warn\.js$/, ''),  // 1. 属于 antd-mobile 内置 svg 文件
  // path.resolve(__dirname, 'src/my-project-svg-foler'),  // 2. 自己私人的 svg 存放目录
];
  // 因为一个 SVG 文件不能被处理两遍. 在 atool-build 默认为 svg配置的svg-url-loade 里 exclude 掉需要 svg-sprite-loader处理的目录
  // https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js#L162
  // https://github.com/kisenka/svg-sprite-loader/issues/4
  webpackConfig.module.loaders.forEach(loader => {
    if (loader.test && typeof loader.test.test === 'function' && loader.test.test('.svg')) {
      loader.exclude = svgDirs;
    }
  });
  // 4. 配置 webpack loader
  webpackConfig.module.loaders.unshift({
    test: /\.(svg)$/i,
    loader: 'svg-sprite',
    include: svgDirs, // 把 svgDirs 路径下的所有 svg 文件交给 svg-sprite-loader 插件处理
  });
  return webpackConfig;
}

如果使用 dva-cli 创建项目，则默认构建工具为 roadhog，其配置方式参考 官方文档

roadhog 版本必须 >= 0.6.0-beta1

组件中使用示例代码如下:

<Icon type="check" />

注意：仅内置部分必要的图标，所有图标名字列表请查看 demo, 同时我们提供了 iconfont 对应的 svg 图标方便下载使用，svg 图标地址 https://github.com/ant-design/ant-design-icons

如果使用 dva-cli 初始化的项目，则默认使用roadhog, roadhog 的 .roadhogrc 文件暂不支持配置 webpack loader, 不过 roadhog 仍然支持用 webpack.config.js 配置。

本地部署

还有一种不推荐但很简便的方式：<Icon type={require('!svg-sprite!./reload.svg')} />这样就不需要将本地 svg 文件所在路径加入到svgDirs数组里了，详细参考 webpack loaders-in-require

如何使用 (RN 版)

RN 版本由于 Icon 无法做纯 UI，需要 native 支持

• 下载 https://at.alicdn.com/t/font_r5u29ls31bgldi.ttf 重命名为 anticon.ttf

• 打开 iOS 项目 info.plist 文件，添加 Fonts provided by application，指定一个 item 的值为 anticon.ttf， 将 anticon.ttf 拖进项目；

• Android 项目将 anticon.ttf 放在 android/app/src/main/assets/fonts/ 目录下;

内置的几个图标： <Icon type="check" size="md" color="red" />
自定义图标：<Icon type={'\ue601'} size={55} /> (具体参看 demo)

注： 自定义图标需要先查找对应图标的 unicode 字符，可以去 ant.design 官网用 chrome 调试工具查看对应图标的值

代码演示

基本

import { Icon, Grid } from 'antd-mobile';
const icons = [
  'check-circle', 'check', 'check-circle-o',
  'cross-circle', 'cross', 'cross-circle-o',
  'up', 'down', 'left',
  'right', 'ellipsis',
  'koubei-o', 'koubei', 'loading',
];
/* eslint global-require: 0 */
const Demo = () => {
  const data = icons.map(item => ({
    icon: (<Icon type={item} />),
    text: item,
  })).concat([{
    icon: (<Icon type={require('./reload.svg')} />),
    text: '自定义图标',
  }]);
  return (
    <Grid data={data} columnNum={3} hasLine={false} />
  );
};
ReactDOM.render(<Demo />, mountNode);

大小

import { Icon, Grid } from 'antd-mobile';
const Demo = () => {
  const size = ['xxs', 'xs', 'sm', 'md', 'lg'];
  const data = size.map(item => ({
    icon: (<Icon type="search" size={item} />),
    text: item,
  }));
  return (<Grid data={data} columnNum={5} hasLine={false} />);
};
ReactDOM.render(<Demo />, mountNode);

API