Ant-design-mobile: antd-mobile-samples例子升级到1.0.0之后图标不显示

[vnicers]

本地环境

win7 32

• antd-mobile 版本：1.0.0
• 浏览器 (或标明是 react-native) 及其版本：chrome
• 运行环境及其版本：

你做了什么？

我想试下svg图标的使用，
下载 https://github.com/ant-design/antd-mobile-samples/tree/master/web-webpack
中的代码，里面已经有配置svg的loader。运行成功一切正常，发现是iconfont 图标，
然后修改了antd-mobile的版本到"antd-mobile": "^1.0.0", 跟新后运行，出现警告

浏览器里面运行发现图标不出现。不知道还需要其他什么配置。

你期待的结果是：

能够正常显示svg图标

可重现的在线演示

https://github.com/ant-design/antd-mobile-samples/tree/master/web-webpack
将antd-mobile更新到1.0.0就可重现

[paranoidjk]

@warmhug sample要不同步更新下？

[warmhug]

sample 代码没问题。可能是 windows 环境的问题，尝试以下方法：

• 使用 npm@3 安装依赖（如果是用 cnpm/tnpm ，这样做 cnpm i --by=npm 参考这里 https://github.com/cnpm/cnpm#install-with-orginal-npm-cli）
• 还有问题，尝试修改 https://github.com/ant-design/antd-mobile-samples/blob/master/web-webpack/webpack.config.js#L10 glob 的匹配表达式

[vnicers]

@warmhug 确实是Windows 的问题。刚在Mac 上相同的版本和配置 是没问题的。
像这样的问题你们会处理吗？毕竟windows上开发的人还是很多的

[warmhug]

以上说的方法，尝试了吗，都解决不了吗？

[jozhi]

我 mac 版本也有这样子的问题，跑的是官方的antd-mobile的 nav 例子，暂时降级到0.9解决。

[paranoidjk]

@vnice 请参考这个方法试一下 https://github.com/ant-design/antd-mobile-samples/commit/e8b1d90bee7e1160776c5d55986544ea5afdda4f

[vnicers]

@paranoidjk windows上还是不行。刚刚我删除了cnpm 安装的依赖，用npm安装 还是不行，修改了glob 的匹配表达式也不行。依然报警告 就是这个issue // https://github.com/kisenka/svg-sprite-loader/issues/65
然后 然同事的一台干净的windows机器安装nodejs 下载web-webpack 这个sample 运行后也是没有图标

[warmhug]

正反斜线的区别？windows 上的路径分隔符都是反斜线，修改下试试看

[vnicers]

@paranoidjk @warmhug @jozhi

{ 
       test: /\.(svg)$/i,
       loader: 'svg-sprite',
       include: [path.resolve(__dirname, 'node_modules/antd-mobile/lib')]
 }

这样是可以的。路径的问题早该想到用path.resolve，但是第二个参数不能用正则，如果用cnpm的话这个地址node_modules/antd-mobile/lib就要变了，根据自己情况写。

[paranoidjk]

@vnice thanks，因为我们这边没有windows机器，稍后会补充到文档里

[paranoidjk]

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

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

ref https://github.com/ant-design/ant-design-mobile/issues/866

[jozhi]

@vnice 依然不知道怎么使用你发出来的那段代码，配置到哪里？ 能不能给出完整的文件路径和内容。。
我这边儿使用的 dva，一些目录结构可能会有些不同，不太清楚从哪下手改。

[paranoidjk]

@jozhi 你是指你用的 roadhog ?

[paranoidjk]

@jozhi

• 我文档可以再加一下roadhog的配置
• 但是文档已经说明了如何配置 webpack-loader，在这之上的各种方案的其配置原理都是一样的, 这种问题通过看roadhog的官方文档完全能搞定，它也是基于webpack封装的，且仍可以接受原有的配置方式
• 社区可能有各种不同的构建方案和环境，我们不可能覆盖全，请谅解。

please try to understand how it work

[jozhi]

@paranoidjk 好的 多谢

结合@vnice 老兄的代码改了一下 roadhog 下 wabpack.config.dev.js 文件的配置，可以看到图标了，但是如何配置自定义的图标还要继续研究

我这边roadhog版本 "roadhog": "^0.5.2"

[paranoidjk]

@jozhi

• 看了下，目前roadhog在它私有的.roadhogrc文件里面还不支持配置loader，但目前你仍然可以用webpack.config.js来配置，它都支持。不建议你改node_modules来实现
• 我已经提了PR，你可以过去+1表明需求 https://github.com/sorrycc/roadhog/pull/144

[paranoidjk]

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