折腾:
【记录】尝试把一个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
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 对其进行升级,请各位用户在 antd-mobile@1.x 期间暂时不要升级 svg-sprite-loader,在项目里仍然使用 svg-sprite-loader@0.3.x 即可。#1283”
webpack2 ant-design-mobile error · Issue #516 · ant-design/ant-design-mobile
最新的dva项目要怎么配置 svg-sprite-loader 以支持antd-mobile的 Icon 组件使用? · Issue #345 · sorrycc/roadhog
先去确认此处的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 <qtuzov@gmail.com>’, ‘princed <eugene@datsky.ru>’ ], 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 } |
结果也还是不行。
参考官网:
去加
import SpriteLoaderPlugin from ‘svg-sprite-loader’; plugins: ([ new SpriteLoaderPlugin() |
或者是:
import SpriteLoaderPlugin from ‘svg-sprite-loader/plugin’; |
结果都是报错:
➜ keyoutong git:(master) ✗ npm run dev > keyoutong@0.0.1 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! keyoutong@0.0.1 dev: `cross-env NODE_ENV=development webpack-dev-server –inline –hot –progress` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the keyoutong@0.0.1 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