最新消息:20210917 已从crifan.com换到crifan.org

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

ReactJS crifan 2853浏览 0评论

折腾:

【记录】尝试把一个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 对其进行升级,请各位用户在 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

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 <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
            }

结果也还是不行。

参考官网:

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
> 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

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
89 queries in 0.198 seconds, using 20.08MB memory