antd-mobile图标不显示

[PatWu16]

本地环境
nodejs+dva+antd-mobile

• antd-mobile 版本：1.0.0
• 浏览器 (或标明是 react-native) 及其版本：最新谷歌

<NavBar
leftContent="返回"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
,

]}
/>

运行时Icon不显示

[silentcloud]

和这个同样的 #846

[Gj-tutu]

1.0里面无法使用ant-design原本的icon了，看了下目前只支持几个svg，有什么兼容方案是可以使用ant-design的icon么

[paranoidjk]

@Gj-tutu 精简的原因在这里 #718 (comment)

自己添加icon的方案在这里 https://mobile.ant.design/components/icon#本地部署

[silentcloud]

@Gj-tutu 支持 type={require('path/to/svg')} 的，0.9 对应的 svg 我明天会放出来，稍等

[Gj-tutu]

@paranoidjk 恩，看到原因了，只是项目里已经使用了之前的，这次是因为更新成1.0发现不见了。。
@silentcloud 多谢，因为项目中已经使用了，突然没了的确会有困扰，其他开发者也就无法更新至最新版了，有劳了！

[paranoidjk]

@Gj-tutu
我们遵循 semver 语义化版本的规范，升级大版本之前请一定关注 更新日志 和 升级指南，尤其是 break change 部分

going to close this, if you have any further question, feel free to reopen it :)

[Gj-tutu]

@paranoidjk 恩，我没注意，应该大版本升级前考虑清楚的，不好意思

[PatWu16]

@paranoidjk

import React, { PropTypes } from 'react';
import { NavBar, Icon } from 'antd-mobile';
import { connect } from 'dva';

import styles from './Header.css';

function Header({ location }) {
return (

<NavBar
leftContent="返回"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
,

]}
/>

);
}

Header.propTypes = {
location: PropTypes.object.isRequired
};

function mapStateToProps() {
return {};
}

export default connect(mapStateToProps)(Header);

图标什么的都有导入

[PatWu16]

@silentcloud
我目前就是这样配置的

[paranoidjk]

check下你的 node_modules/antd-mobile/lib 是不是存在？

[felixzxk]

我的情况也是一样的，不过用的roadhog，安装了glob和svg-sprite-loader，在node_modules/roadhog/src/conf/webpack.config.dev.js做了同样配置，图标不显示

[PatWu16]

@paranoidjk 路径检查过的，没问题

[paranoidjk]

@PatWu16 windows先参照这里处理一下 #840 (comment)

[paranoidjk]

svg icon 的使用文档已更新，进行了配置的简化和尽可能兼容到windows以及cnpm等各种情况

https://mobile.ant.design/components/icon

ref #866

[paranoidjk]

@felixzxk svg icon 的文档已更新，添加了 roadhog 的支持 https://mobile.ant.design/components/icon

[paranoidjk]

@dancinglone 贴代码格式化是最基本的尊重

[dancinglone]

@paranoidjk 抱歉，我删掉整理一下。谢谢提醒！

我按最新文档安装的，用**cnpm**， windows，关键配置如下：

//目录定义部分
const svgDirs = [
    require.resolve('antd-mobile').replace(/warn.js$/, ''), // 1. 属于 antd-mobile 内置 svg 文件
    // path.resolve(__dirname, 'src/my-project-svg-foler'), // 2. 自己私人的 svg 存放目录
];

// loader定义部分
module: {
loaders: [
    {
        test: /.(svg)$/i,
        loader: 'svg-sprite',
        include: svgDirs, // 把 svgDirs 路径下的所有 svg 文件交给 svg-sprite-loader 插件处理
    }
]
}

没有任何报错。

但图标就是显示不出来。（升级前是正常的）

有遇到同样问题的朋友吗，求解。会不会是因为用了cnpm， 或者因为windows路径不是这样定义？
求指导

[paranoidjk]

@dancinglone 你的配置看起来没问题，图标没显示需要你自己调试下。或者你可以在你机器上跑一下官方demo看看 https://github.com/ant-design/antd-mobile-samples/tree/master/rn-web

[dancinglone]

现有调整后可以了。 发现我的项目的webpack 配置里面已经有svg相关的loader了，把原来的注释了才可以：

loaders: [
      {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel'},
      {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'url?name=[name].[ext]'},
      {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000&mimetype=application/font-woff&name=[name].[ext]"},
      {test: /\.ttf(\?v=\d+.\d+.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream&name=[name].[ext]'},
      // {test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml&name=[name].[ext]'},
      {test: /\.(jpe?g|png|gif)$/i, loader: 'url-loader?limit=15000&name=build/[name].[ext]'},
      {test: /\.ico$/, loader: 'file?name=[name].[ext]'},
      {test: /(\.css|\.scss)$/, loader: ExtractTextPlugin.extract('css?sourceMap!postcss!sass?sourceMap')},
      {
        test: /\.(svg)$/i,
        loader: 'svg-sprite',
        include: svgDirs,  // 把 svgDirs 路径下的所有 svg 文件交给 svg-sprite-loader 插件处理
      }
    ]

因为原来是没有用到svg的，所以应该没什么问题。但如果原来有，怕不怕有问题？ webpack的配置了解的还不够多，我自行了解一下。

先把经历贴出来，让有同样问题的朋友可以参考。