最新的dva项目要怎么配置 svg-sprite-loader 以支持antd-mobile的 Icon 组件使用？

[luajoy]

参照 road-hog 的方式，配置不成功。
由于dva项目中没有.roadhogrc.js文件，自行创建.roadhogrc.js文件并设置内容为：

const path = require('path');
const svgSpriteDirs = [
require.resolve('antd-mobile').replace(/warn.js$/, ''), // antd-mobile 内置svg
path.resolve(__dirname, 'src/assets'), // 业务代码本地私有 svg 存放目录
];
export default {
// ...
svgSpriteLoaderDirs: svgSpriteDirs,
//...
}

然后添加语句 <Icon type={require('../assets/scan.svg')} />
但是运行时，浏览器js报错：Icon props.type is invalid, have you set svg-sprite-loader correctly?

[sorrycc]

@paranoidjk 有空帮忙看下。

[paranoidjk]

@luajoy 请检查并给出下面两个信息

• 是否删除了 .roadhogrc
• roadhog 的版本

[paranoidjk]

@luajoy 一般是由于没有删除 .roadhogrc, 而 roadhog 优先读取到 .roadhogrc 就停止尝试读取其他配置文件了。

@sorrycc 稍后我 PR 在这里增加一个 dev 的 console warning 吧

[luajoy]

@paranoidjk

• 没有删除 .roadhogrc
• roadhog版本是0.5.2
  原来 .roadhogrc 和 .roadhogrc.js 两种配置不能同时使用啊！ 多谢两位，我试试

[paranoidjk]

@luajoy roadhog 版本也要升级。see antd-mobile@Icon

这里我稍后也在 readme 里面注明一下

[luajoy]

非常感谢，困扰一天的问题终于解决了：

• 我升级 roadhog 到 0.6.0 版本；
• 删除.roadhogrc然后创建.roadhogrc.js文件并配置为：

const path = require('path');
const svgSpriteDirs = [
require.resolve('antd-mobile').replace(/warn.js$/, ''), // antd-mobile 内置svg
path.resolve(__dirname, 'src/assets'), // 业务代码本地私有 svg 存放目录
];

export default {
entry: "src/index.js",
env: {
development: {
extraBabelPlugins: [
"dva-hmr",
"transform-runtime",
["import", { "libraryName": "antd-mobile", "libraryDirectory": "lib", "style": "css" }]
]
},
production: {
extraBabelPlugins: [
"transform-runtime"
]
}
},
svgSpriteLoaderDirs: svgSpriteDirs,
}

然后在源码中使用Icon，<Icon type={require('../assets/scan.svg')} />，终于显示了，错误也没了！

最新的 dva-cli 创建的项目，默认的roadhog版本是0.5.2，希望改为最新版本。

非常感谢！

[zuiidea]

it is not true.

我记得之前 require('./svg/icon.svg') 返回的是一个string，也就是svg的id，
也许是svg-sprite-loader的原因，现在返回的是一个对象如下：

antd-mobile处理Icon，也是将require()后的返回值作为Icon的type，所以也有类似的报错

Icon props.type is invalid, have you set svg-sprite-loader correctly? see https://goo.gl/kN8oiw

[paranoidjk]

https://mobile.ant.design/docs/react/introduce-cn#Web-使用方式