Open hanyuxinting opened 5 years ago
小火箭默认是没有对SVG 进行sprite设置的。所以需要手动写plugin,进行配置。 以下代码是小火箭主刀写的:
const merge = require("babel-merge"); module.exports = api => { api.chainWebpack(webpackChain => { webpackChain.module .rule("svg") .test(/\.svg$/) .use('file') .loader(require.resolve("svg-sprite-loader")) .options({}).end() .use('file') .loader(require.resolve('svgo-loader')).end() .before('image') }); };
测试用例:(react 下使用的)
import NewFile from '../../image/new-file.svg'; <svg viewBox={NewFile.viewBox}> <use xlinkHref={`#${NewFile.id}`} /> </svg>
一般用例:(svg-sprite-loader官方测试)
import twitterLogo from './logos/twitter.svg'; // twitterLogo === SpriteSymbol<id: string, viewBox: string, content: string> // Extract mode: SpriteSymbol<id: string, viewBox: string, url: string, toString: Function> const rendered = ` <svg viewBox="${twitterLogo.viewBox}"> <use xlink:href="#${twitterLogo.id}" /> </svg>`;
写完demo后,我遇到了问题1:
Error in parsing SVG: Non-whitespace before first tag.
解决思路:https://github.com/kisenka/svg-sprite-loader/issues/236
然后遇到了问题2:
npm run dev 时报InvalidSvg: svg-sprite-loader错误
解决思路:https://github.com/chenkunlia/djsl/issues/2
然后问题解决了~~~ 但具体为什么,我需要进一步研究一下 svg-sprite-loader 与 svgo-loader 的关系,及webpack module 里的执行顺序。
另因为批量导入文件使用的require.context,也还不是很清楚,稍后补齐~
额,先补上可用的小火箭配置:
const merge = require("babel-merge"); module.exports = api => { api.chainWebpack(webpackChain => { webpackChain.module .rule("svg") .test(/\.svg$/) .use('file') .loader(require.resolve('svgo-loader')).end() .use('file') .loader(require.resolve("svg-sprite-loader")) .options({}).end() .before('image') }); };
svg-sprite-loader在小火箭中的应用
小火箭默认是没有对SVG 进行sprite设置的。所以需要手动写plugin,进行配置。 以下代码是小火箭主刀写的:
测试用例:(react 下使用的)
一般用例:(svg-sprite-loader官方测试)
写完demo后,我遇到了问题1:
解决思路:https://github.com/kisenka/svg-sprite-loader/issues/236
然后遇到了问题2:
解决思路:https://github.com/chenkunlia/djsl/issues/2
然后问题解决了~~~ 但具体为什么,我需要进一步研究一下 svg-sprite-loader 与 svgo-loader 的关系,及webpack module 里的执行顺序。
另因为批量导入文件使用的require.context,也还不是很清楚,稍后补齐~
额,先补上可用的小火箭配置: