【未解决】antd-mobile的svg图标没有加载：Icon props.type is invalid, have you set svg-sprite-loader correctly

折腾：

【记录】尝试把一个preact-boilerplate的空项目引入antd-mobile的UI

期间，已经参考

ant-design-mobile/introduce.zh-CN.md at master · ant-design/ant-design-mobile

去配置了。

但是结果使用到icon时，svg的图标还是没有出来：

index.web.js?ee50:94

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

更新日志 – Ant Design

svg-sprite-loader

“1.2.0#

2017-06-03

Notice

antd-mobile Icon 所依赖的开源 webpack loader svg-sprite-loader 最近从 0.3 直接升级到了 2.0, 其配置方案发生了 break change，但由于此 loader 的版本由用户代码控制，而功能被 antd-mobile 和用户代码所共同依赖， antd-mobile 团队只能选择在 2.0 对其进行升级，请各位用户在 [email protected] 期间暂时不要升级 svg-sprite-loader，在项目里仍然使用 [email protected] 即可。#1283”

webpack2 ant-design-mobile error · Issue #516 · ant-design/ant-design-mobile

kisenka/svg-sprite-loader: SVG sprite loader for Webpack. Examples – http://kisenka.me/svg-sprite-loader/examples

当把 “svg-sprite-loader” 升级至最新版本 “^2.1.0″，“antd-mobile” 升级至最新版本 “^1.1.3”，Toast 组件(也可能是凡是涉及到Icon的组件)无法正常使用 · Issue #1317 · ant-design/ant-design-mobile

先去确认此处的svg-sprite-loader，的确是安装了对应的版本

➜ keyoutong git:(master) ✗ npm view svg-sprite-loader

{ name: ‘svg-sprite-loader’,

description: ‘SVG sprite loader for Webpack’,

‘dist-tags’: { alpha: ‘2.0.0-alpha.4’, beta: ‘2.1.0-3’, latest: ‘3.0.10’ },

maintainers: [ ‘kisenka <[email protected]>’, ‘princed <[email protected]>’ ],

time:

{ modified: ‘2017-07-31T16:37:07.000Z’,

created: ‘2015-08-06T11:49:41.764Z’,

‘3.0.10’: ‘2017-07-31T16:18:51.276Z’,

‘3.0.9’: ‘2017-07-31T15:32:12.261Z’,

‘3.0.8’: ‘2017-07-28T14:17:33.667Z’,

‘3.0.7’: ‘2017-07-24T16:35:26.189Z’,

‘3.0.6’: ‘2017-07-17T09:51:25.750Z’,

‘3.0.5’: ‘2017-06-02T07:24:48.645Z’,

‘3.0.4’: ‘2017-05-31T15:54:03.617Z’,

‘3.0.3’: ‘2017-05-29T13:08:13.085Z’,

‘3.0.2’: ‘2017-05-24T13:56:55.855Z’,

‘3.0.1’: ‘2017-05-22T20:10:31.820Z’,

‘3.0.0’: ‘2017-05-21T18:22:05.266Z’,

‘2.1.0’: ‘2017-05-15T08:22:53.013Z’,

‘2.0.6’: ‘2017-05-13T16:23:44.614Z’,

‘2.1.0-3’: ‘2017-05-10T15:10:31.261Z’,

‘2.1.0-2’: ‘2017-05-09T16:31:47.509Z’,

‘2.1.0-1’: ‘2017-05-08T10:51:17.584Z’,

‘2.1.0-0’: ‘2017-05-07T14:55:56.325Z’,

‘2.0.5’: ‘2017-05-05T21:06:14.208Z’,

‘2.0.4’: ‘2017-05-02T16:16:57.496Z’,

‘2.0.3’: ‘2017-05-02T15:18:40.146Z’,

‘2.0.2’: ‘2017-05-02T12:41:38.846Z’,

‘2.0.1’: ‘2017-04-28T16:23:19.820Z’,

‘0.3.1’: ‘2017-04-25T14:19:40.490Z’,

‘2.0.0-alpha.4’: ‘2017-04-24T07:31:17.828Z’,

‘2.0.0-alpha.3’: ‘2017-04-23T20:06:41.500Z’,

‘2.0.0-alpha.2’: ‘2017-04-23T19:42:42.212Z’,

‘2.0.0-alpha.1’: ‘2017-04-23T16:15:50.366Z’,

‘0.3.0’: ‘2017-02-14T10:58:49.474Z’,

‘0.2.2’: ‘2017-02-14T10:50:13.828Z’,

‘0.2.1’: ‘2017-02-07T18:01:13.321Z’,

‘0.2.0’: ‘2017-01-18T17:12:29.874Z’,

‘0.1.2’: ‘2016-12-27T21:09:40.426Z’,

‘0.1.1’: ‘2016-12-09T15:48:29.206Z’,

‘0.0.31’: ‘2016-10-14T13:01:33.075Z’,

‘0.0.30’: ‘2016-10-14T12:19:30.046Z’,

‘0.0.29’: ‘2016-10-06T16:19:37.991Z’,

‘0.0.28’: ‘2016-09-21T09:03:04.408Z’,

‘0.0.27’: ‘2016-09-01T08:21:35.650Z’,

‘0.0.26’: ‘2016-07-16T09:01:01.364Z’,

‘0.0.25’: ‘2016-07-04T08:22:36.850Z’,

‘0.0.24’: ‘2016-06-23T12:37:31.493Z’,

‘0.0.23’: ‘2016-06-21T14:20:48.347Z’,

‘0.0.22’: ‘2016-06-11T11:37:14.901Z’,

‘0.0.21’: ‘2016-06-07T22:26:13.246Z’,

‘0.0.20’: ‘2016-06-07T13:36:29.382Z’,

‘0.0.19’: ‘2016-05-13T13:36:58.149Z’,

‘0.0.18’: ‘2016-03-10T13:27:34.520Z’,

‘0.0.17’: ‘2016-03-09T11:13:02.009Z’,

‘0.0.16’: ‘2016-01-11T17:11:46.262Z’,

‘0.0.15’: ‘2015-11-19T11:16:32.138Z’,

‘0.0.14’: ‘2015-11-16T09:17:08.005Z’,

‘0.0.13’: ‘2015-11-10T15:22:39.205Z’,

‘0.0.12’: ‘2015-11-06T15:51:39.862Z’,

‘0.0.11’: ‘2015-10-13T19:19:31.676Z’,

‘0.0.10’: ‘2015-10-06T14:32:37.018Z’,

‘0.0.9’: ‘2015-10-06T12:38:08.265Z’,

‘0.0.8’: ‘2015-10-02T14:45:29.658Z’,

‘0.0.7’: ‘2015-09-25T16:08:28.323Z’,

‘0.0.6’: ‘2015-09-24T16:54:04.666Z’,

‘0.0.5’: ‘2015-09-23T19:18:47.700Z’,

‘0.0.3’: ‘2015-09-03T22:11:54.045Z’,

‘0.0.2’: ‘2015-08-06T11:49:41.764Z’ },

users: { kisenka: true, mshwery: true, cfleschhut: true },

author: ‘kisenka’,

repository:

{ type: ‘git’,

url: ‘git+https://github.com/kisenka/webpack-svg-sprite-loader.git’ },

versions:

[ ‘0.0.2’,

‘0.0.3’,

‘0.0.5’,

‘0.0.6’,

‘0.0.7’,

‘0.0.8’,

‘0.0.9’,

‘0.0.10’,

‘0.0.11’,

‘0.0.12’,

‘0.0.13’,

‘0.0.14’,

‘0.0.15’,

‘0.0.16’,

‘0.0.17’,

‘0.0.18’,

‘0.0.19’,

‘0.0.20’,

‘0.0.21’,

‘0.0.22’,

‘0.0.23’,

‘0.0.24’,

‘0.0.25’,

‘0.0.26’,

‘0.0.27’,

‘0.0.28’,

‘0.0.29’,

‘0.0.30’,

‘0.0.31’,

‘0.1.1’,

‘0.1.2’,

‘0.2.0’,

‘0.2.1’,

‘0.2.2’,

‘0.3.0’,

‘0.3.1’,

‘2.0.0-alpha.1’,

‘2.0.0-alpha.2’,

‘2.0.0-alpha.3’,

‘2.0.0-alpha.4’,

‘2.0.1’,

‘2.0.2’,

‘2.0.3’,

‘2.0.4’,

‘2.0.5’,

‘2.0.6’,

‘2.1.0-0’,

‘2.1.0-1’,

‘2.1.0-2’,

‘2.1.0-3’,

‘2.1.0’,

‘3.0.0’,

‘3.0.1’,

‘3.0.2’,

‘3.0.3’,

‘3.0.4’,

‘3.0.5’,

‘3.0.6’,

‘3.0.7’,

‘3.0.8’,

‘3.0.9’,

‘3.0.10’ ],

homepage: ‘https://github.com/kisenka/webpack-svg-sprite-loader#readme’,

bugs: { url: ‘https://github.com/kisenka/webpack-svg-sprite-loader/issues’ },

license: ‘MIT’,

version: ‘3.0.10’,

main: ‘lib/loader.js’,

files:

[ ‘examples/**’,

‘lib/**’,

‘runtime/*.js’,

‘plugin.js’,

‘README.md’,

‘LICENSE’ ],

keywords: [ ‘webpack’, ‘sprite’, ‘svg’ ],

dependencies:

{ bluebird: ‘^3.5.0’,

deepmerge: ‘1.3.2’,

domready: ‘1.0.8’,

‘escape-string-regexp’: ‘1.0.5’,

‘loader-utils’: ‘^1.1.0’,

‘svg-baker’: ‘^1.2.7’,

‘svg-baker-runtime’: ‘^1.2.96’,

‘url-slug’: ‘2.0.0’ },

devDependencies:

{ ‘babel-core’: ‘^6.24.1’,

‘babel-loader’: ‘^6.4.1’,

‘babel-plugin-transform-object-rest-spread’: ‘6.23.0’,

‘babel-preset-es2015’: ‘^6.24.0’,

‘babel-preset-react’: ‘6.24.1’,

chai: ‘^3.5.0’,

‘ci-publish’: ‘^1.3.0’,

‘codeclimate-test-reporter’: ‘0.4.1’,

commitizen: ‘2.9.6’,

‘css-loader’: ‘^0.28.0’,

‘cz-customizable’: ‘^5.0.0’,

eslint: ‘^3.18.0’,

‘eslint-config-airbnb-base’: ‘^11.1.2’,

‘eslint-plugin-import’: ‘^2.2.0’,

‘file-loader’: ‘^0.11.1’,

glob: ‘7.1.1’,

‘html-loader’: ‘^0.4.5’,

‘html-webpack-plugin’: ‘2.28.0’,

husky: ‘^0.13.3’,

istanbul: ‘^0.4.5’,

minimist: ‘^1.2.0’,

mocha: ‘^3.2.0’,

nyc: ‘^10.3.2’,

‘pascal-case’: ‘2.0.1’,

react: ‘15.5.4’,

‘react-dom’: ‘15.5.4’,

rollup: ‘^0.41.6’,

‘rollup-plugin-buble’: ‘^0.15.0’,

‘rollup-plugin-commonjs’: ‘^8.0.2’,

‘rollup-plugin-node-resolve’: ‘^3.0.0’,

shelljs: ‘0.7.7’,

‘standard-version’: ‘4.0.0’,

svgo: ‘^0.7.2’,

‘svgo-loader’: ‘^1.2.1’,

‘validate-commit-msg’: ‘^2.12.1’,

‘wallaby-webpack’: ‘0.0.38’,

‘webpack-toolkit’: ‘0.11.0’ },

config:

{ commitizen: { path: ‘node_modules/cz-customizable’ },

‘cz-customizable’: { config: ‘.cz-config.js’ } },

scripts:

{ bootstrap: ‘yarn && node node_modules/husky/bin/install && cd env/webpack-1 && yarn && cd ../webpack-2 && yarn && cd ../.. && yarn env:webpack-2’,

‘build:examples’: ‘npm run build:runtime && node scripts/build-examples-dll && node scripts/build-examples’,

‘build:runtime’: ‘node scripts/build-runtime.js’,

commit: ‘git-cz’,

commitmsg: ‘validate-commit-msg’,

‘env:webpack-1’: ‘node scripts/set-env –env webpack-1’,

‘env:webpack-2’: ‘node scripts/set-env –env webpack-2’,

lint: ‘eslint –quiet lib runtime scripts test’,

precommit: ‘yarn lint’,

pretest: ‘yarn build:runtime’,

prerelease: ‘yarn build:runtime && yarn lint && yarn test:all’,

release: ‘yarn build:examples && git add examples && standard-version -a && git push –follow-tags origin master’,

‘release:dry-run’: ‘standard-version –no-verify’,

test: ‘nyc –check-coverage mocha test/*.test.js’,

‘test:webpack-1’: ‘yarn env:webpack-1 && yarn test’,

‘test:webpack-2’: ‘yarn env:webpack-2 && yarn test’,

‘test:all’: ‘yarn test:webpack-1 && yarn test:webpack-2’,

‘upload-coverage’: ‘codeclimate-test-reporter < coverage/lcov.info’ },

gitHead: ‘e594ade6b40254a914c267761b8be83f6d350adb’,

dist:

{ shasum: ‘b1f345bc2fbc37764cd75f2bbb131720aaeaddbe’,

size: 271206,

noattachment: false,

tarball: ‘http://registry.npm.taobao.org/svg-sprite-loader/download/svg-sprite-loader-3.0.10.tgz’ },

directories: {},

publish_time: 1501517931276 }

的确是：

version: ‘3.0.10’,

然后去添加配置：

/webpack.config.babel.js

//svg

const svgSpriteDirs = [

require.resolve(‘antd-mobile’).replace(/warn\.js$/, ”) // antd-mobile 内置svg

//path.resolve(__dirname, ‘src/my-project-svg-foler’), // 业务代码本地私有 svg 存放目录

];

{

test: /\.svg$/,

loader: ‘svg-sprite-loader’,

include: svgSpriteDirs

}

结果也还是不行。

参考官网：

kisenka/svg-sprite-loader: SVG sprite loader for Webpack. Examples – http://kisenka.me/svg-sprite-loader/examples

去加

import SpriteLoaderPlugin from ‘svg-sprite-loader’;

plugins: ([

new SpriteLoaderPlugin()

或者是：

import SpriteLoaderPlugin from ‘svg-sprite-loader/plugin’;

结果都是报错：

➜ keyoutong git:(master) ✗ npm run dev

> [email protected] dev /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/keyoutong/keyoutong

> cross-env NODE_ENV=development webpack-dev-server –inline –hot –progress

module.js:487

throw err;

Error: Cannot find module ‘svg-sprite-loader/plugin’

at Function.Module._resolveFilename (module.js:485:15)

at Function.Module._load (module.js:437:25)

at Module.require (module.js:513:17)

at require (internal/module.js:11:18)

at Object.<anonymous> (/Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/keyoutong/keyoutong/webpack.config.babel.js:19:1)

at Module._compile (module.js:569:30)

at loader (/Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/keyoutong/keyoutong/node_modules/babel-register/lib/node.js:144:5)。。。

at Module.load (module.js:503:32)

at tryModuleLoad (module.js:466:12)

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! [email protected] dev: `cross-env NODE_ENV=development webpack-dev-server –inline –hot –progress`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the [email protected] dev script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR! /Users/crifan/.npm/_logs/2017-08-01T02_20_07_263Z-debug.log

➜ keyoutong git:(master) ✗

算了。都懒得继续折腾了。

以后有空再去弄。

转载请注明：在路上 » 【未解决】antd-mobile的svg图标没有加载：Icon props.type is invalid, have you set svg-sprite-loader correctly

Post Views: 1,165

【未解决】antd-mobile的svg图标没有加载：Icon props.type is invalid, have you set svg-sprite-loader correctly

与本文相关的文章

Hi，您需要填写昵称和邮箱！