progress on migrating to heex templates and font-icons

This commit is contained in:
Adam Piontek 2022-08-13 07:32:36 -04:00
parent d43daafdb7
commit 3eff955672
21793 changed files with 2161968 additions and 16895 deletions
assets_old/node_modules/svg-sprite-loader
CHANGELOG.mdLICENSEREADME.md
examples
lib
package.jsonplugin.js

787
assets_old/node_modules/svg-sprite-loader/CHANGELOG.md generated vendored Normal file
View file

@ -0,0 +1,787 @@
# Change Log
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
<a name="6.0.2"></a>
## [6.0.2](https://github.com/JetBrains/svg-sprite-loader/compare/v6.0.1...v6.0.2) (2021-03-18)
<a name="6.0.1"></a>
## [6.0.1](https://github.com/JetBrains/svg-sprite-loader/compare/v6.0.0...v6.0.1) (2021-03-18)
<a name="6.0.0"></a>
# [6.0.0](https://github.com/JetBrains/svg-sprite-loader/compare/v5.2.1...v6.0.0) (2021-03-13)
### Bug Fixes
* **additional-assets:** adds missing method ([8db9c4d](https://github.com/JetBrains/svg-sprite-loader/commit/8db9c4d))
* **loader:** get rid of webpack--version ([54a0c6b](https://github.com/JetBrains/svg-sprite-loader/commit/54a0c6b)), closes [#437](https://github.com/JetBrains/svg-sprite-loader/issues/437) [#417](https://github.com/JetBrains/svg-sprite-loader/issues/417)
### BREAKING CHANGES
* **loader:** delete get-webpack-version.js
<a name="5.2.1"></a>
## [5.2.1](https://github.com/JetBrains/svg-sprite-loader/compare/v5.2.0...v5.2.1) (2020-12-14)
<a name="5.2.0"></a>
# [5.2.0](https://github.com/JetBrains/svg-sprite-loader/compare/v5.1.1...v5.2.0) (2020-12-14)
### Features
* update-dependency ([d93c5cf](https://github.com/JetBrains/svg-sprite-loader/commit/d93c5cf))
<a name="5.1.1"></a>
## [5.1.1](https://github.com/JetBrains/svg-sprite-loader/compare/v5.1.0...v5.1.1) (2020-12-05)
<a name="5.1.0"></a>
# [5.1.0](https://github.com/JetBrains/svg-sprite-loader/compare/v5.0.0...v5.1.0) (2020-12-05)
### Features
* add support for webpack5 ([b34b2b2](https://github.com/JetBrains/svg-sprite-loader/commit/b34b2b2))
* nodejs update ([00f4fc2](https://github.com/JetBrains/svg-sprite-loader/commit/00f4fc2))
<a name="5.0.0"></a>
# [5.0.0](https://github.com/JetBrains/svg-sprite-loader/compare/v4.3.0...v5.0.0) (2020-05-11)
### Bug Fixes
* pass proper context param to runtime generator ([c084ec7](https://github.com/JetBrains/svg-sprite-loader/commit/c084ec7)), closes [#186](https://github.com/JetBrains/svg-sprite-loader/issues/186)
### BREAKING CHANGES
* Possible breaks third-party runtime generators. Earlier `context` param was containing _path to compilation root context_, e.g. folder where webpack compilation occurs. This is wrong behaviour, because meaning of this param is a _folder where svg image is located_. So it was changed in this commit.
If your custom runtime generator breaks after this update use `loaderContext.rootContext` option instead of `context`.
<a name="4.3.0"></a>
# [4.3.0](https://github.com/JetBrains/svg-sprite-loader/compare/v4.2.7...v4.3.0) (2020-05-03)
### Features
* **outputPath:** add possibility to define output path ([2c7eceb](https://github.com/JetBrains/svg-sprite-loader/commit/2c7eceb))
<a name="4.2.7"></a>
## [4.2.7](https://github.com/JetBrains/svg-sprite-loader/compare/v4.2.6...v4.2.7) (2020-04-28)
### Bug Fixes
* move `mask` & `clipPath` elements outside symbol ([ae70786](https://github.com/JetBrains/svg-sprite-loader/commit/ae70786)), closes [#325](https://github.com/JetBrains/svg-sprite-loader/issues/325)
<a name="4.2.6"></a>
## [4.2.6](https://github.com/JetBrains/svg-sprite-loader/compare/v4.2.5...v4.2.6) (2020-04-26)
### Bug Fixes
* drop webpack version detector ([7131578](https://github.com/JetBrains/svg-sprite-loader/commit/7131578))
<a name="4.2.5"></a>
## [4.2.5](https://github.com/JetBrains/svg-sprite-loader/compare/v4.2.4...v4.2.5) (2020-04-12)
### Bug Fixes
* refers to transpiled code in svg-baker-runtime ([65ece05](https://github.com/JetBrains/svg-sprite-loader/commit/65ece05)), closes [#385](https://github.com/JetBrains/svg-sprite-loader/issues/385)
<a name="4.2.4"></a>
## [4.2.4](https://github.com/JetBrains/svg-sprite-loader/compare/v4.2.3...v4.2.4) (2020-04-12)
### Bug Fixes
* don't create additional chunk for sprite ([80ebfa3](https://github.com/JetBrains/svg-sprite-loader/commit/80ebfa3)), closes [#364](https://github.com/JetBrains/svg-sprite-loader/issues/364)
<a name="4.2.3"></a>
## [4.2.3](https://github.com/JetBrains/svg-sprite-loader/compare/v4.2.2...v4.2.3) (2020-04-08)
### Bug Fixes
* check properly when window.angular properly ([1c76824](https://github.com/JetBrains/svg-sprite-loader/commit/1c76824))
<a name="4.2.2"></a>
## [4.2.2](https://github.com/JetBrains/svg-sprite-loader/compare/v4.2.1...v4.2.2) (2020-04-02)
### Bug Fixes
* add aria-hidden attribute to sprite node for proper accessibility behaviour ([bb08665](https://github.com/JetBrains/svg-sprite-loader/commit/bb08665)), closes [#315](https://github.com/JetBrains/svg-sprite-loader/issues/315)
<a name="4.2.1"></a>
## [4.2.1](https://github.com/JetBrains/svg-sprite-loader/compare/v4.2.0...v4.2.1) (2020-01-31)
### Bug Fixes
* drop npm-shrinkwrap.json due to it causes installation of old dependencies when npm is used ([7439e61](https://github.com/JetBrains/svg-sprite-loader/commit/7439e61)), closes [#378](https://github.com/JetBrains/svg-sprite-loader/issues/378) [#379](https://github.com/JetBrains/svg-sprite-loader/issues/379)
<a name="4.2.0"></a>
# [4.2.0](https://github.com/JetBrains/svg-sprite-loader/compare/v4.1.6...v4.2.0) (2020-01-24)
### Bug Fixes
* get-webpack-version.js ([6508469](https://github.com/JetBrains/svg-sprite-loader/commit/6508469))
### Features
* add clipPath & mask to "move-from-symbol-to-root" transform defaults ([02d0c33](https://github.com/JetBrains/svg-sprite-loader/commit/02d0c33)), closes [#288](https://github.com/JetBrains/svg-sprite-loader/issues/288) [#325](https://github.com/JetBrains/svg-sprite-loader/issues/325)
<a name="4.1.6"></a>
## [4.1.6](https://github.com/JetBrains/svg-sprite-loader/compare/v4.1.5...v4.1.6) (2019-04-27)
### Bug Fixes
* incorrect items order after sorting ([ded8146](https://github.com/JetBrains/svg-sprite-loader/commit/ded8146))
<a name="4.1.5"></a>
## [4.1.5](https://github.com/JetBrains/svg-sprite-loader/compare/v4.1.4...v4.1.5) (2019-04-27)
### Bug Fixes
* replace all instances of urls in attribute ([d6fdf94](https://github.com/JetBrains/svg-sprite-loader/commit/d6fdf94)), closes [#300](https://github.com/JetBrains/svg-sprite-loader/issues/300)
<a name="4.1.4"></a>
## [4.1.4](https://github.com/JetBrains/svg-sprite-loader/compare/v4.1.3...v4.1.4) (2019-04-27)
### Bug Fixes
* incorrect detection webpack version, closes [#309](https://github.com/JetBrains/svg-sprite-loader/issues/309)
* Fix the bug of publicPath, closes [#311](https://github.com/JetBrains/svg-sprite-loader/issues/311)
* **configuration** make possible to use `oneOf` in loader rules
* **configuration:** make default config work with yarn PnP ([dc931e2](https://github.com/JetBrains/svg-sprite-loader/commit/dc931e2))
* **runtime-generator:** fix module not found errors for custom spriteModule or symbolModule ([44bbcfe](https://github.com/JetBrains/svg-sprite-loader/commit/44bbcfe))
<a name="4.1.3"></a>
## [4.1.3](https://github.com/JetBrains/svg-sprite-loader/compare/v4.1.2...v4.1.3) (2018-10-29)
### Bug Fixes
* update svg-baker to fix security vulnerability ([4408ccd](https://github.com/JetBrains/svg-sprite-loader/commit/4408ccd))
<a name="4.1.2"></a>
## [4.1.2](https://github.com/JetBrains/svg-sprite-loader/compare/v4.1.1...v4.1.2) (2018-09-28)
### Bug Fixes
* drop webpack dependency ([6254f9c](https://github.com/JetBrains/svg-sprite-loader/commit/6254f9c))
<a name="4.1.1"></a>
## [4.1.1](https://github.com/JetBrains/svg-sprite-loader/compare/v4.1.0...v4.1.1) (2018-09-19)
### Bug Fixes
* interpolate publicPath properly ([22f10e6](https://github.com/JetBrains/svg-sprite-loader/commit/22f10e6))
<a name="4.1.0"></a>
# [4.1.0](https://github.com/JetBrains/svg-sprite-loader/compare/v4.0.0...v4.1.0) (2018-09-19)
### Features
* add ARIA attrs to whitelist symbol attributes ([4bbccab](https://github.com/JetBrains/svg-sprite-loader/commit/4bbccab)), closes [#304](https://github.com/JetBrains/svg-sprite-loader/issues/304)
<a name="4.0.0"></a>
# [4.0.0](https://github.com/JetBrains/svg-sprite-loader/compare/v3.9.0...v4.0.0) (2018-09-19)
<a name="3.9.0"></a>
# [3.9.0](https://github.com/JetBrains/svg-sprite-loader/compare/v3.8.0...v3.9.0) (2018-05-26)
### Features
* support symbol id interpolator as function ([3691d86](https://github.com/JetBrains/svg-sprite-loader/commit/3691d86))
<a name="3.8.0"></a>
# [3.8.0](https://github.com/JetBrains/svg-sprite-loader/compare/v3.7.3...v3.8.0) (2018-05-26)
### Bug Fixes
* error link in pr template ([7b6cf30](https://github.com/JetBrains/svg-sprite-loader/commit/7b6cf30))
### Features
* support `publicPath` option ([793a7bf](https://github.com/JetBrains/svg-sprite-loader/commit/793a7bf))
* support custom outputPath ([80f7520](https://github.com/JetBrains/svg-sprite-loader/commit/80f7520))
<a name="3.7.3"></a>
## [3.7.3](https://github.com/JetBrains/svg-sprite-loader/compare/v3.7.2...v3.7.3) (2018-03-19)
### Bug Fixes
* **utils:** fix linting errors ([f5239a0](https://github.com/JetBrains/svg-sprite-loader/commit/f5239a0))
* **utils:** prevent errors for modules without resources ([467daa6](https://github.com/JetBrains/svg-sprite-loader/commit/467daa6))
<a name="3.7.2"></a>
## [3.7.2](https://github.com/JetBrains/svg-sprite-loader/compare/v3.7.1...v3.7.2) (2018-03-19)
<a name="3.7.1"></a>
## [3.7.1](https://github.com/JetBrains/svg-sprite-loader/compare/v3.7.0...v3.7.1) (2018-03-12)
### Bug Fixes
* **loader:** wrong build target ([66e98f9](https://github.com/JetBrains/svg-sprite-loader/commit/66e98f9))
<a name="3.7.0"></a>
# [3.7.0](https://github.com/JetBrains/svg-sprite-loader/compare/v3.6.2...v3.7.0) (2018-03-10)
### Features
* add webpack 4 support ([20f59ca](https://github.com/JetBrains/svg-sprite-loader/commit/20f59ca))
<a name="3.6.2"></a>
## [3.6.2](https://github.com/JetBrains/svg-sprite-loader/compare/v3.6.1...v3.6.2) (2017-12-27)
### Bug Fixes
* **plugin:** prevent outer symbol ast modifications ([0c8c3d0](https://github.com/JetBrains/svg-sprite-loader/commit/0c8c3d0))
<a name="3.6.1"></a>
## [3.6.1](https://github.com/JetBrains/svg-sprite-loader/compare/v3.6.0...v3.6.1) (2017-12-25)
### Bug Fixes
* **plugin:** don't hide sprite by default ([fd629bd](https://github.com/JetBrains/svg-sprite-loader/commit/fd629bd))
<a name="3.6.0"></a>
# [3.6.0](https://github.com/JetBrains/svg-sprite-loader/compare/v3.5.4...v3.6.0) (2017-12-22)
### Features
* **plugin:** add ability to specify sprite attributes in extract mode ([a6a5e30](https://github.com/JetBrains/svg-sprite-loader/commit/a6a5e30))
<a name="3.5.4"></a>
## [3.5.4](https://github.com/JetBrains/svg-sprite-loader/compare/v3.5.3...v3.5.4) (2017-12-19)
### Bug Fixes
* **plugin:** refer to sprite file properly in plainSprite mode ([e4789a4](https://github.com/JetBrains/svg-sprite-loader/commit/e4789a4))
<a name="3.5.3"></a>
## [3.5.3](https://github.com/JetBrains/svg-sprite-loader/compare/v3.5.2...v3.5.3) (2017-12-19)
### Bug Fixes
* **loader:** drop "2 applied rules" warning ([e18f7d6](https://github.com/JetBrains/svg-sprite-loader/commit/e18f7d6))
<a name="3.5.2"></a>
## [3.5.2](https://github.com/JetBrains/svg-sprite-loader/compare/v3.5.1...v3.5.2) (2017-12-12)
### Bug Fixes
* **loader:** #203 support use in rule.oneOf ([cb3d2da](https://github.com/JetBrains/svg-sprite-loader/commit/cb3d2da))
<a name="3.5.1"></a>
## [3.5.1](https://github.com/JetBrains/svg-sprite-loader/compare/v3.5.0...v3.5.1) (2017-12-08)
### Bug Fixes
* **package:** drop postinstall script ([8a46c78](https://github.com/JetBrains/svg-sprite-loader/commit/8a46c78))
<a name="3.5.0"></a>
# [3.5.0](https://github.com/JetBrains/svg-sprite-loader/compare/v3.4.1...v3.5.0) (2017-12-08)
### Features
* **loader:** add functional type of spriteFilename ([297a957](https://github.com/JetBrains/svg-sprite-loader/commit/297a957))
<a name="3.4.1"></a>
## [3.4.1](https://github.com/JetBrains/svg-sprite-loader/compare/v3.4.0...v3.4.1) (2017-10-23)
### Bug Fixes
* **plugin:** make sprite file hash more stable ([7e9c53e](https://github.com/JetBrains/svg-sprite-loader/commit/7e9c53e))
<a name="3.4.0"></a>
# [3.4.0](https://github.com/JetBrains/svg-sprite-loader/compare/v3.3.1...v3.4.0) (2017-10-19)
### Features
* better html-webpack-plugin interop in extract mode ([8a2d63e](https://github.com/JetBrains/svg-sprite-loader/commit/8a2d63e))
<a name="3.3.1"></a>
## [3.3.1](https://github.com/JetBrains/svg-sprite-loader/compare/v3.3.0...v3.3.1) (2017-10-16)
### Bug Fixes
* **loader:** check this.cacheable existence before call it ([c1ed50a](https://github.com/JetBrains/svg-sprite-loader/commit/c1ed50a))
<a name="3.3.0"></a>
# [3.3.0](https://github.com/JetBrains/svg-sprite-loader/compare/v3.2.6...v3.3.0) (2017-10-16)
### Features
* **plugin:** allow to render external sprite without styles and usages ([fcf3939](https://github.com/JetBrains/svg-sprite-loader/commit/fcf3939))
<a name="3.2.6"></a>
## [3.2.6](https://github.com/JetBrains/svg-sprite-loader/compare/v3.2.5...v3.2.6) (2017-09-28)
### Bug Fixes
* **loader:** #187 support rule.oneOf config ([75df92e](https://github.com/JetBrains/svg-sprite-loader/commit/75df92e))
* **loader:** support resourceQuery in extract mode with webpack version above 1 ([6652d78](https://github.com/JetBrains/svg-sprite-loader/commit/6652d78))
<a name="3.2.5"></a>
## [3.2.5](https://github.com/JetBrains/svg-sprite-loader/compare/v3.2.4...v3.2.5) (2017-08-31)
### Bug Fixes
* **runtime:** don't encode "(", ")" and "~" symbols when replacing urls in <use> references ([388ce74](https://github.com/JetBrains/svg-sprite-loader/commit/388ce74))
<a name="3.2.4"></a>
## [3.2.4](https://github.com/JetBrains/svg-sprite-loader/compare/v3.2.3...v3.2.4) (2017-08-20)
### Bug Fixes
* preserve \`fill\` and \`stroke\` attrs when transform svg to symbol ([d845aa3](https://github.com/JetBrains/svg-sprite-loader/commit/d845aa3))
<a name="3.2.3"></a>
## [3.2.3](https://github.com/JetBrains/svg-sprite-loader/compare/v3.2.2...v3.2.3) (2017-08-18)
### Bug Fixes
* deal with deprecation warnings from webpack 3 ([d150035](https://github.com/JetBrains/svg-sprite-loader/commit/d150035))
<a name="3.2.2"></a>
## [3.2.2](https://github.com/JetBrains/svg-sprite-loader/compare/v3.2.1...v3.2.2) (2017-08-17)
### Bug Fixes
* **plugin:** webpack-manifest-plugin compatibility ([d88ac31](https://github.com/JetBrains/svg-sprite-loader/commit/d88ac31))
<a name="3.2.1"></a>
## [3.2.1](https://github.com/JetBrains/svg-sprite-loader/compare/v3.2.0...v3.2.1) (2017-08-16)
### Bug Fixes
* **runtime:** apply styles in dynamically appended symbols in Edge ([299bfe2](https://github.com/JetBrains/svg-sprite-loader/commit/299bfe2))
<a name="3.2.0"></a>
# [3.2.0](https://github.com/JetBrains/svg-sprite-loader/compare/v3.1.7...v3.2.0) (2017-08-16)
### Features
* **runtime:** add ability to create sprite from existing DOM node ([4056d7b](https://github.com/JetBrains/svg-sprite-loader/commit/4056d7b))
<a name="3.1.7"></a>
## [3.1.7](https://github.com/JetBrains/svg-sprite-loader/compare/v3.1.6...v3.1.7) (2017-08-15)
### Bug Fixes
* **runtime:** store global sprite object in window which allows to mount symbols in one place betwee ([13e3d47](https://github.com/JetBrains/svg-sprite-loader/commit/13e3d47))
<a name="3.1.6"></a>
## [3.1.6](https://github.com/JetBrains/svg-sprite-loader/compare/v3.1.5...v3.1.6) (2017-08-10)
### Bug Fixes
* **loader:** interpolate sprite filename properly ([b17e5e0](https://github.com/JetBrains/svg-sprite-loader/commit/b17e5e0))
<a name="3.1.5"></a>
## [3.1.5](https://github.com/JetBrains/svg-sprite-loader/compare/v3.1.4...v3.1.5) (2017-08-10)
### Bug Fixes
* **loader:** throw an exception if input is not valid SVG ([413246e](https://github.com/JetBrains/svg-sprite-loader/commit/413246e)), closes [#170](https://github.com/JetBrains/svg-sprite-loader/issues/170)
<a name="3.1.4"></a>
## [3.1.4](https://github.com/JetBrains/svg-sprite-loader/compare/v3.1.3...v3.1.4) (2017-08-09)
### Bug Fixes
* **loader:** quick workaround for breaking changes in webpack@3.5 (`modules` prop dropped in ConcatenatedModule) ([f15030d](https://github.com/JetBrains/svg-sprite-loader/commit/f15030d))
<a name="3.1.3"></a>
## [3.1.3](https://github.com/JetBrains/svg-sprite-loader/compare/v3.1.2...v3.1.3) (2017-08-08)
### Bug Fixes
* **loader:** throw proper error message when runtime not found ([ef83fac](https://github.com/JetBrains/svg-sprite-loader/commit/ef83fac))
<a name="3.1.2"></a>
## [3.1.2](https://github.com/JetBrains/svg-sprite-loader/compare/v3.1.1...v3.1.2) (2017-08-05)
### Bug Fixes
* **loader:** decode entities in <style> tags ([36e6ba6](https://github.com/JetBrains/svg-sprite-loader/commit/36e6ba6))
<a name="3.1.1"></a>
## [3.1.1](https://github.com/JetBrains/svg-sprite-loader/compare/v3.1.0...v3.1.1) (2017-08-04)
### Bug Fixes
* **loader:** handle case when rule test is a function ([ace9f47](https://github.com/JetBrains/svg-sprite-loader/commit/ace9f47))
<a name="3.1.0"></a>
# [3.1.0](https://github.com/JetBrains/svg-sprite-loader/compare/v3.0.11...v3.1.0) (2017-08-03)
### Features
* **loader:** webpack 3 module concatenation interop in extract mode ([8a79536](https://github.com/JetBrains/svg-sprite-loader/commit/8a79536))
<a name="3.0.11"></a>
## [3.0.11](https://github.com/JetBrains/svg-sprite-loader/compare/v3.0.10...v3.0.11) (2017-08-03)
### Bug Fixes
* **runtime:** pass proper old URL in Angular workaround ([fbda8a2](https://github.com/JetBrains/svg-sprite-loader/commit/fbda8a2))
<a name="3.0.10"></a>
## [3.0.10](https://github.com/JetBrains/svg-sprite-loader/compare/v3.0.9...v3.0.10) (2017-07-31)
### Configuration
* **configuration:** add support for `symbolRegExp` pattern in symbol name interpolation ([e9de712](https://github.com/JetBrains/svg-sprite-loader/commit/e9de712))
<a name="3.0.9"></a>
## [3.0.9](https://github.com/JetBrains/svg-sprite-loader/compare/v3.0.8...v3.0.9) (2017-07-31)
### Bug Fixes
* **runtime:** fix IE/Edge rendering with SVG containing 'style' elements ([dcc9e27](https://github.com/JetBrains/svg-sprite-loader/commit/dcc9e27))
<a name="3.0.8"></a>
## [3.0.8](https://github.com/JetBrains/svg-sprite-loader/compare/v3.0.7...v3.0.8) (2017-07-28)
### Bug Fixes
* **runtime:** fallback to early sprite mount when document.body appears ([a71e67a](https://github.com/JetBrains/svg-sprite-loader/commit/a71e67a))
<a name="3.0.7"></a>
## [3.0.7](https://github.com/JetBrains/svg-sprite-loader/compare/v3.0.6...v3.0.7) (2017-07-24)
### Bug Fixes
* **runtime-generator:** return symbol id string in compat mode ([7641af0](https://github.com/JetBrains/svg-sprite-loader/commit/7641af0))
<a name="3.0.6"></a>
## [3.0.6](https://github.com/JetBrains/svg-sprite-loader/compare/v3.0.5...v3.0.6) (2017-07-17)
### Bug Fixes
* **loader:** add support for issuer when matching rules ([5d21b2f](https://github.com/JetBrains/svg-sprite-loader/commit/5d21b2f))
<a name="3.0.5"></a>
## [3.0.5](https://github.com/JetBrains/svg-sprite-loader/compare/v3.0.4...v3.0.5) (2017-06-02)
### Bug Fixes
* **loader:** replace sprite filename in whole source ([d4d4429](https://github.com/JetBrains/svg-sprite-loader/commit/d4d4429))
<a name="3.0.4"></a>
## [3.0.4](https://github.com/JetBrains/svg-sprite-loader/compare/v3.0.3...v3.0.4) (2017-05-31)
### Bug Fixes
* **utils:** properly replace path to image with sprite name on Windows ([6bdd6cd](https://github.com/JetBrains/svg-sprite-loader/commit/6bdd6cd))
<a name="3.0.3"></a>
## [3.0.3](https://github.com/JetBrains/svg-sprite-loader/compare/v3.0.2...v3.0.3) (2017-05-29)
### Bug Fixes
* **configuration:** proper configurator runtime selection based on \`target\` loader context ([a7365a2](https://github.com/JetBrains/svg-sprite-loader/commit/a7365a2))
<a name="3.0.2"></a>
## [3.0.2](https://github.com/JetBrains/svg-sprite-loader/compare/v3.0.1...v3.0.2) (2017-05-24)
### Bug Fixes
* **loader:** check module request properly in isModuleShouldBeExtracted with DLL Plugin ([ffb7b04](https://github.com/JetBrains/svg-sprite-loader/commit/ffb7b04))
<a name="3.0.1"></a>
## [3.0.1](https://github.com/JetBrains/svg-sprite-loader/compare/v3.0.0...v3.0.1) (2017-05-22)
### Bug Fixes
* **runtime-generator:** runtime generator in extract mode return object instead of string ([208b6dc](https://github.com/JetBrains/svg-sprite-loader/commit/208b6dc))
<a name="3.0.0"></a>
# [3.0.0](https://github.com/JetBrains/svg-sprite-loader/compare/v2.1.0...v3.0.0) (2017-05-21)
### Features
* **loader:** runtime exports an object in extract mode ([f0af0eb](https://github.com/JetBrains/svg-sprite-loader/commit/f0af0eb))
### Reverts
* **tools:** rollback to standart-version :) ([b948e65](https://github.com/JetBrains/svg-sprite-loader/commit/b948e65))
### BREAKING CHANGES
* **loader:** Generated runtime in extract mode is changed from string to object
ISSUES CLOSED: #123
<a name="2.1.0"></a>
# [2.1.0](https://github.com/JetBrains/svg-sprite-loader/compare/v2.0.6...v2.1.0) (2017-05-13)
### Bug Fixes
* **multiple:** update svg-baker deps ([ead7d68](https://github.com/JetBrains/svg-sprite-loader/commit/ead7d68)), closes [#101](https://github.com/JetBrains/svg-sprite-loader/issues/101) [#103](https://github.com/JetBrains/svg-sprite-loader/issues/103) [#112](https://github.com/JetBrains/svg-sprite-loader/issues/112)
* **runtime:** update svg-baker-runtime with fixed angular workaround ([1543029](https://github.com/JetBrains/svg-sprite-loader/commit/1543029)), closes [#103](https://github.com/JetBrains/svg-sprite-loader/issues/103)
### Features
* add [hash] token substitution support ([87110f4](https://github.com/JetBrains/svg-sprite-loader/commit/87110f4)), closes [#98](https://github.com/JetBrains/svg-sprite-loader/issues/98) [#111](https://github.com/JetBrains/svg-sprite-loader/issues/111)
<a name="2.0.6"></a>
## [2.0.6](https://github.com/JetBrains/svg-sprite-loader/compare/v2.0.5...v2.0.6) (2017-05-13)
### Bug Fixes
* **configure:** use `browser-sprite``browser-symbol` for `electron-renderer` target ([b9a3ed0](https://github.com/JetBrains/svg-sprite-loader/commit/b9a3ed0))
<a name="2.1.0-3"></a>
## [2.1.0-3](https://github.com/JetBrains/svg-sprite-loader/compare/v2.1.0-2...v2.1.0-3) [beta] (2017-05-10)
### Bug Fixes
* **plugin:** properly replace paths on Windows ([0c70caa](https://github.com/JetBrains/svg-sprite-loader/commit/0c70caa)), closes [#106](https://github.com/JetBrains/svg-sprite-loader/issues/106)
<a name="2.1.0-2"></a>
## [2.1.0-2](https://github.com/JetBrains/svg-sprite-loader/compare/v2.1.0-1...v2.1.0-2) [beta] (2017-05-09)
### Bug Fixes
* **loader:** symbol id interpolation ([18edd99](https://github.com/JetBrains/svg-sprite-loader/commit/18edd99))
<a name="2.1.0-1"></a>
## [2.1.0-1](https://github.com/JetBrains/svg-sprite-loader/compare/v2.1.0-0...v2.1.0-1) [beta] (2017-05-08)
### Bug Fixes
* **plugin:** properly generate symbol url in extract mode ([6af7230](https://github.com/JetBrains/svg-sprite-loader/commit/6af7230))
<a name="2.1.0-0"></a>
## [2.1.0-0](https://github.com/JetBrains/svg-sprite-loader/compare/v2.0.5...v2.1.0-0) [beta] (2017-05-07)
### Bug Fixes
* **utils:** fix default import ([0c34daa](https://github.com/JetBrains/svg-sprite-loader/commit/0c34daa))
### Features
* **interop:** extract-text-webpack-plugin & html-webpack-plugin interop ([a38fdcc](https://github.com/JetBrains/svg-sprite-loader/commit/a38fdcc))
* **interop:** extract-text-webpack-plugin with allChunks: true interoperability ([63d347d](https://github.com/JetBrains/svg-sprite-loader/commit/63d347d))
* **spritehash:** add ability to use `[spritehash]` substitution token in spriteFilename ([f9eba1b](https://github.com/JetBrains/svg-sprite-loader/commit/f9eba1b))
<a name="2.0.5"></a>
## [2.0.5](https://github.com/JetBrains/svg-sprite-loader/compare/v2.0.4...v2.0.5) (2017-05-05)

21
assets_old/node_modules/svg-sprite-loader/LICENSE generated vendored Normal file
View file

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2017 Stas Kurilov (kisenka)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

321
assets_old/node_modules/svg-sprite-loader/README.md generated vendored Normal file
View file

@ -0,0 +1,321 @@
# SVG sprite loader
[![NPM version][version-img]][versions-img] [![Build status][ci-img]][ci-url] [![Documentation score][docs-coverage-img]][docs-coverage-url] [![Dependencies status][deps-img]][deps-url] [![Dev dependencies status][dev-deps-img]][dev-deps-url] [![NPM downloads][downloads-img]][npm-url]
Webpack loader for creating SVG sprites.
> :tada: 2.0 is out, please read the [migration guide & overview](2.0.md).
> :warning: For old v0.x versions see [the README in the v0 branch](https://github.com/JetBrains/svg-sprite-loader/blob/v0/README.md).
## Table of contents
- [Why it's cool](#why-its-cool)
- [Installation](#installation)
- [Configuration](#configuration)
- [`symbolId`](#symbol-id)
- [`symbolRegExp`](#symbol-regexp)
- [`esModule`](#es-module)
- [Runtime configuration](#runtime-configuration)
- [`spriteModule`](#sprite-module)
- [`symbolModule`](#symbol-module)
- [`runtimeGenerator`](#runtime-generator)
- [`runtimeCompat`](#runtime-compat) (deprecated)
- [`runtimeOptions`](#runtime-options)
- [Extract configuration](#extract-configuration)
- [`extract`](#extract)
- [`spriteFilename`](#sprite-filename)
- [`publicPath`](#public-path)
- [`outputPath`](#output-path)
- [`plainSprite`](#plain-sprite)
- [`spriteAttrs`](#sprite-attrs)
- [Examples](#examples)
- [Contributing guidelines](#contributing-guidelines)
- [License](#license)
- [Credits](#credits)
## Why it's cool
- **Minimum initial configuration**. Most of the options are configured automatically.
- **Runtime for browser**. Sprites are rendered and injected in pages automatically, you just refer to images via `<svg><use xlink:href="#id"></use></svg>`.
- **Isomorphic runtime for node/browser**. Can render sprites on server or in browser manually.
- **Customizable**. Write/extend runtime module to implement custom sprite behaviour. Write/extend runtime generator to produce your own runtime, e.g. React component configured with imported symbol.
- **External sprite file** is generated for images imported from css/scss/sass/less/styl/html ([SVG stacking technique](https://css-tricks.com/svg-fragment-identifiers-work/#article-header-id-4)).
## Installation
```bash
npm install svg-sprite-loader -D
# via yarn
yarn add svg-sprite-loader -D
```
## Configuration
```js
// webpack 1
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
query: { ... }
}
// webpack 1 multiple loaders
{
test: /\.svg$/,
loaders: [
`svg-sprite-loader?${JSON.stringify({ ... })}`,
'svg-transform-loader',
'svgo-loader'
]
}
// webpack >= 2
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
options: { ... }
}
// webpack >= 2 multiple loaders
{
test: /\.svg$/,
use: [
{ loader: 'svg-sprite-loader', options: { ... } },
'svg-transform-loader',
'svgo-loader'
]
}
```
<a id="symbol-id"></a>
### `symbolId` (`string | function(path, query)`, default `[name]`)
How `<symbol>` `id` attribute should be named. All patterns from [loader-utils#interpolateName](https://github.com/webpack/loader-utils#interpolatename)
are supported. Also can be a function which accepts 2 args - file path and query string and return symbol id:
```js
{
symbolId: filePath => path.basename(filePath)
}
```
<a id="symbol-regexp"></a>
### `symbolRegExp` (default `''`)
Passed to the symbolId interpolator to support the [N] pattern in the loader-utils name interpolator
<a id="es-module"></a>
### `esModule` (default `true`, autoconfigured)
Generated export format:
- when `true` loader will produce `export default ...`.
- when `false` the result is `module.exports = ...`.
By default depends on used webpack version: `true` for webpack >= 2, `false` otherwise.
## Runtime configuration
When you require an image, loader transforms it to SVG `<symbol>`, adds it to the special sprite storage and returns class instance
that represents symbol. It contains `id`, `viewBox` and `content` (`id`, `viewBox` and `url` in extract mode)
fields and can later be used for referencing the sprite image, e.g:
```js
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>`;
```
When browser event `DOMContentLoaded` is fired, sprite will be automatically rendered and injected in the `document.body`.
If custom behaviour is needed (e.g. a different mounting target) default sprite module could be overridden via `spriteModule` option. Check example below.
<a id="sprite-module"></a>
### `spriteModule` (autoconfigured)
Path to sprite module that will be compiled and executed at runtime.
By default it depends on [`target`](https://webpack.js.org/configuration/target) webpack config option:
- `svg-sprite-loader/runtime/browser-sprite.build` for 'web' target.
- `svg-sprite-loader/runtime/sprite.build` for other targets.
If you need custom behavior, use this option to specify a path of your sprite implementation module.
Path will be resolved relative to the current webpack build folder, e.g. `utils/sprite.js` placed in current project dir should be written as `./utils/sprite`.
Example of sprite with custom mounting target (copypasted from [browser-sprite](https://github.com/JetBrains/svg-sprite-loader/blob/master/runtime/browser-sprite.js)):
```js
import BrowserSprite from 'svg-baker-runtime/src/browser-sprite';
import domready from 'domready';
const sprite = new BrowserSprite();
domready(() => sprite.mount('#my-custom-mounting-target'));
export default sprite; // don't forget to export!
```
It's highly recommended to extend default sprite classes:
- [for browser-specific env](https://github.com/JetBrains/svg-baker/blob/master/packages/svg-baker-runtime/src/browser-sprite.js)
- [for isomorphic env](https://github.com/JetBrains/svg-baker/blob/master/packages/svg-baker-runtime/src/sprite.js)
<a id="symbol-module"></a>
### `symbolModule` (autoconfigured)
Same as `spriteModule`, but for sprite symbol. By default also depends on `target` webpack config option:
- `svg-baker-runtime/browser-symbol` for 'web' target.
- `svg-baker-runtime/symbol` for other targets.
<a id="runtime-generator"></a>
### `runtimeGenerator` ([default generator](https://github.com/JetBrains/svg-sprite-loader/blob/master/lib/runtime-generator.js))
Path to node.js script that generates client runtime.
Use this option if you need to produce your own runtime, e.g. React component configured with imported symbol. [Example](https://github.com/JetBrains/svg-sprite-loader/tree/master/examples/custom-runtime-generator).
<a id="runtime-compat"></a>
### `runtimeCompat` (default `false`, deprecated)
Should runtime be compatible with earlier v0.x loader versions. This option will be removed in the next major version release.
<a id="runtime-options"></a>
### `runtimeOptions`
Arbitrary data passed to runtime generator. Reserved for future use when other runtime generators will be created.
## Extract configuration
In the extract mode loader should be configured with plugin, otherwise an error is thrown. Example:
```js
// webpack.config.js
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
...
{
plugins: [
new SpriteLoaderPlugin()
]
}
```
<a id="extract"></a>
### `extract` (default `false`, autoconfigured)
Switches loader to the extract mode.
Enabled automatically for images imported from css/scss/sass/less/styl/html files.
<a id="sprite-filename"></a>
### `spriteFilename` (type `string|Function<string>`,default `sprite.svg`)
Filename of extracted sprite. Multiple sprites can be generated by specifying different loader rules restricted with `include` option or
by providing custom function which recieves SVG file absolute path, e.g.:
```js
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
options: {
extract: true,
spriteFilename: svgPath => `sprite${svgPath.substr(-4)}`
}
}
```
`[hash]` in sprite filename will be replaced by it's content hash.
It is also possible to generate sprite for each chunk by using `[chunkname]` pattern in spriteFilename option. This is experimental feature, use it with caution!
<a id="public-path"></a>
### `publicPath` (type: `string`, default: `__webpack_public_path__`)
Custom public path for sprite file.
```js
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
options: {
extract: true,
publicPath: '/'
}
}
```
<a id="output-path"></a>
### `outputPath` (type: `string`, default: null`)
Custom output path for sprite file.
By default it will use `publicPath`.
This param is useful if you want to store sprite is a directory with a custom http access.
```js
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
options: {
extract: true,
outputPath: 'custom-dir/sprites/'
publicPath: 'sprites/'
}
}
```
<a id="plain-sprite"></a>
### Plain sprite
You can render plain sprite in extract mode without styles and usages. Pass `plainSprite: true` option to plugin constructor:
```js
{
plugins: [
new SpriteLoaderPlugin({ plainSprite: true })
]
}
```
<a id="sprite-attrs"></a>
### Sprite attributes
Sprite `<svg>` tag attributes can be specified via `spriteAttrs` plugin option:
```js
{
plugins: [
new SpriteLoaderPlugin({
plainSprite: true,
spriteAttrs: {
id: 'my-custom-sprite-id'
}
})
]
}
```
## Examples
See [examples](examples) folder.
## Contributing guidelines
See [CONTRIBUTING.md](CONTRIBUTING.md).
## License
See [LICENSE](LICENSE)
## Credits
Huge thanks for [all this people](https://github.com/JetBrains/svg-sprite-loader/graphs/contributors).
[npm-url]: https://www.npmjs.com/package/svg-sprite-loader
[version-img]: https://img.shields.io/npm/v/svg-sprite-loader.svg?style=flat-square
[versions-img]: https://libraries.io/npm/svg-sprite-loader/versions
[downloads-img]: https://img.shields.io/npm/dm/svg-sprite-loader.svg?style=flat-square
[deps-url]: https://david-dm.org/JetBrains/svg-sprite-loader
[deps-img]: https://img.shields.io/david/JetBrains/svg-sprite-loader.svg?style=flat-square
[dev-deps-url]: https://david-dm.org/JetBrains/svg-sprite-loader?type=dev
[dev-deps-img]: https://img.shields.io/david/dev/JetBrains/svg-sprite-loader.svg?style=flat-square
[ci-url]: https://travis-ci.org/JetBrains/svg-sprite-loader
[ci-img]: https://img.shields.io/travis/JetBrains/svg-sprite-loader.svg?style=flat-square
[docs-coverage-url]: https://inch-ci.org/github/JetBrains/svg-sprite-loader
[docs-coverage-img]: https://inch-ci.org/github/JetBrains/svg-sprite-loader.svg?branch=master&style=flat-square

View file

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
<g><g><g><path d="M990,500c0-270.6-219.4-490-490-490C229.4,10,10,229.4,10,500c0,270.6,219.4,490,490,490C770.6,990,990,770.6,990,500z M54.5,500C54.5,254,254,54.5,500,54.5C746,54.5,945.5,254,945.5,500c0,246-199.4,445.5-445.5,445.5C254,945.5,54.5,746,54.5,500z"/><path d="M518.8,782.8V500h93.3l14.7-93.7H518.8v-47c0-24.5,8-47.8,43.1-47.8h70.2v-93.5h-99.6c-83.7,0-106.6,55.1-106.6,131.6v56.7h-57.5V500h57.5v282.8H518.8L518.8,782.8z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></g>
</svg>

After

(image error) Size: 1 KiB

View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="273.4px" height="222.2px" viewBox="0 0 273.4 222.2" style="enable-background:new 0 0 273.4 222.2;" xml:space="preserve">
<path d="M273.4,26.3c-10.1,4.5-20.9,7.5-32.2,8.8c11.6-6.9,20.5-17.9,24.7-31C255,10.5,243,15.2,230.2,17.7
C220,6.8,205.4,0,189.3,0c-31,0-56.1,25.1-56.1,56.1c0,4.4,0.5,8.7,1.5,12.8C88,66.5,46.7,44.2,19,10.3c-4.8,8.3-7.6,17.9-7.6,28.2
c0,19.5,9.9,36.6,25,46.7c-9.2-0.3-17.8-2.8-25.4-7c0,0.2,0,0.5,0,0.7c0,27.2,19.3,49.8,45,55c-4.7,1.3-9.7,2-14.8,2
c-3.6,0-7.1-0.4-10.6-1c7.1,22.3,27.9,38.5,52.4,39c-19.2,15-43.4,24-69.7,24c-4.5,0-9-0.3-13.4-0.8c24.8,15.9,54.3,25.2,86,25.2
c103.2,0,159.6-85.5,159.6-159.6c0-2.4-0.1-4.9-0.2-7.3C256.4,47.4,265.9,37.5,273.4,26.3z"/>
</svg>

After

(image error) Size: 962 B

File diff suppressed because one or more lines are too long

After

(image error) Size: 72 KiB

View file

@ -0,0 +1,24 @@
const path = require('path');
const packageName = require('../package.json').name;
const config = {
output: {
filename: '[name].js'
},
devtool: false,
resolve: {
alias: {
[packageName]: path.resolve(__dirname, '..')
}
},
resolveLoader: {
alias: {
[packageName]: path.resolve(__dirname, '..')
}
}
};
module.exports = config;

View file

@ -0,0 +1,29 @@
# Default browser runtime example
In browser sprite is rendered and injected in page automatically, you just refer to images via `<svg><use xlink:href="#id"></use></svg>`.
### [Demo](demo.html)
Input
```js
import twitterIcon from '../assets/twitter.svg';
```
Reference in HTML
```html
<svg>
<use xlink:href="#twitter"></use>
</svg>
```
### Input
- [main.js](main.js)
- [demo.html](demo.html)
- [webpack.config.js](webpack.config.js)
### Output
- [build/main.js](build/main.js)

View file

@ -0,0 +1,101 @@
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "build/";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__ = __webpack_require__(1);
// => {id string, width: string, height: string, viewBox: string, url: string}
console.log(__WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__["a" /* default */]);
window.addEventListener('DOMContentLoaded', () => {
const image = `<img width="${__WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__["a" /* default */].width}" height="${__WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__["a" /* default */].height}" src="${__WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__["a" /* default */].url}">`;
const usage = `<svg viewBox="${__WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__["a" /* default */].viewBox}"><use xlink:href="${__WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__["a" /* default */].url}"></use></svg>`;
document.body.innerHTML = `${image} ${usage}`;
});
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony default export */ __webpack_exports__["a"] = ({
id: "twitter-usage",
viewBox: "0 0 273.4 222.2",
url: "/static/" + "sprite.svg#twitter-usage",
toString: function () {
return this.url;
}
});
/***/ })
/******/ ]);

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style>
.sprite-symbol-usage {display: none;}
.sprite-symbol-usage:target {display: inline;}
</style><symbol viewBox="0 0 273.4 222.2" id="twitter"><path d="M273.4 26.3c-10.1 4.5-20.9 7.5-32.2 8.8 11.6-6.9 20.5-17.9 24.7-31-10.9 6.4-22.9 11.1-35.7 13.6A55.919 55.919 0 0 0 189.3 0c-31 0-56.1 25.1-56.1 56.1 0 4.4.5 8.7 1.5 12.8C88 66.5 46.7 44.2 19 10.3c-4.8 8.3-7.6 17.9-7.6 28.2 0 19.5 9.9 36.6 25 46.7-9.2-.3-17.8-2.8-25.4-7v.7c0 27.2 19.3 49.8 45 55-4.7 1.3-9.7 2-14.8 2-3.6 0-7.1-.4-10.6-1 7.1 22.3 27.9 38.5 52.4 39-19.2 15-43.4 24-69.7 24-4.5 0-9-.3-13.4-.8 24.8 15.9 54.3 25.2 86 25.2 103.2 0 159.6-85.5 159.6-159.6 0-2.4-.1-4.9-.2-7.3 11.1-8 20.6-17.9 28.1-29.1z" /></symbol></defs><use id="twitter-usage" xlink:href="#twitter" class="sprite-symbol-usage" /></svg>

After

(image error) Size: 872 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style>
.sprite-symbol-usage {display: none;}
.sprite-symbol-usage:target {display: inline;}
</style><symbol viewBox="0 0 273.4 222.2" id="twitter"><path d="M273.4 26.3c-10.1 4.5-20.9 7.5-32.2 8.8 11.6-6.9 20.5-17.9 24.7-31-10.9 6.4-22.9 11.1-35.7 13.6A55.919 55.919 0 0 0 189.3 0c-31 0-56.1 25.1-56.1 56.1 0 4.4.5 8.7 1.5 12.8C88 66.5 46.7 44.2 19 10.3c-4.8 8.3-7.6 17.9-7.6 28.2 0 19.5 9.9 36.6 25 46.7-9.2-.3-17.8-2.8-25.4-7v.7c0 27.2 19.3 49.8 45 55-4.7 1.3-9.7 2-14.8 2-3.6 0-7.1-.4-10.6-1 7.1 22.3 27.9 38.5 52.4 39-19.2 15-43.4 24-69.7 24-4.5 0-9-.3-13.4-.8 24.8 15.9 54.3 25.2 86 25.2 103.2 0 159.6-85.5 159.6-159.6 0-2.4-.1-4.9-.2-7.3 11.1-8 20.6-17.9 28.1-29.1z" /></symbol></defs><use id="twitter-usage" xlink:href="#twitter" class="sprite-symbol-usage" /></svg>

After

(image error) Size: 872 B

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="build/main.js"></script>
</head>
<body>
</body>
</html>

View file

@ -0,0 +1,11 @@
import symbolData from '../assets/twitter.svg';
// => {id string, width: string, height: string, viewBox: string, url: string}
console.log(symbolData);
window.addEventListener('DOMContentLoaded', () => {
const image = `<img width="${symbolData.width}" height="${symbolData.height}" src="${symbolData.url}">`;
const usage = `<svg viewBox="${symbolData.viewBox}"><use xlink:href="${symbolData.url}"></use></svg>`;
document.body.innerHTML = `${image} ${usage}`;
});

View file

@ -0,0 +1,37 @@
const path = require('path');
const merge = require('deepmerge');
const baseConfig = require('../base-webpack.config');
const SpritePlugin = require('../../plugin');
module.exports = merge(baseConfig, {
context: __dirname,
entry: './main',
output: {
path: path.resolve(__dirname, 'build'),
publicPath: 'build/'
},
module: {
rules: [
{
test: /\.svg$/,
use: [
{
loader: 'svg-sprite-loader',
options: {
extract: true,
publicPath: '/static/'
}
},
'svgo-loader'
]
}
]
},
plugins: [
new SpritePlugin()
]
});

View file

@ -0,0 +1 @@
{"name":"dll","content":{"./dll.js":{"id":1,"meta":{"harmonyModule":true},"exports":["dll"]},"../assets/facebook.svg":{"id":2,"meta":{"harmonyModule":true},"exports":["default"]}}}

View file

@ -0,0 +1,117 @@
var dll =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__;
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony export (immutable) */ __webpack_exports__["dll"] = dll;
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__assets_facebook_svg__ = __webpack_require__(2);
// => {id string, width: string, height: string, viewBox: string, url: string}
console.log(`dll: ${__WEBPACK_IMPORTED_MODULE_0__assets_facebook_svg__["default"]}`);
let image;
let usage;
window.addEventListener('DOMContentLoaded', () => {
image = `<img width="${__WEBPACK_IMPORTED_MODULE_0__assets_facebook_svg__["default"].width}" height="${__WEBPACK_IMPORTED_MODULE_0__assets_facebook_svg__["default"].height}" src="${__WEBPACK_IMPORTED_MODULE_0__assets_facebook_svg__["default"].url}">`;
usage = `<svg viewBox="${__WEBPACK_IMPORTED_MODULE_0__assets_facebook_svg__["default"].viewBox}"><use xlink:href="${__WEBPACK_IMPORTED_MODULE_0__assets_facebook_svg__["default"].url}"></use></svg>`;
});
function dll() {
console.log('dll module');
document.body.insertAdjacentHTML('beforeend', `${image} ${usage}`);
}
/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony default export */ __webpack_exports__["default"] = ({
id: "facebook-usage",
viewBox: "0 0 1000 1000",
url: __webpack_require__.p + "dll.svg#facebook-usage",
toString: function () {
return this.url;
}
});
/***/ })
/******/ ]);

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style>
.sprite-symbol-usage {display: none;}
.sprite-symbol-usage:target {display: inline;}
</style><symbol viewBox="0 0 1000 1000" id="facebook"><path d="M990 500c0-270.6-219.4-490-490-490S10 229.4 10 500s219.4 490 490 490 490-219.4 490-490zm-935.5 0C54.5 254 254 54.5 500 54.5S945.5 254 945.5 500 746.1 945.5 500 945.5C254 945.5 54.5 746 54.5 500z" /><path d="M518.8 782.8V500h93.3l14.7-93.7h-108v-47c0-24.5 8-47.8 43.1-47.8h70.2V218h-99.6c-83.7 0-106.6 55.1-106.6 131.6v56.7h-57.5V500h57.5v282.8h92.9z" /></symbol></defs><use id="facebook-usage" xlink:href="#facebook" class="sprite-symbol-usage" /></svg>

After

(image error) Size: 708 B

View file

@ -0,0 +1,147 @@
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "build/";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__dll__ = __webpack_require__(2);
// => {id string, width: string, height: string, viewBox: string, url: string}
console.log(`main: ${__WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__["a" /* default */]}`);
window.addEventListener('DOMContentLoaded', () => {
const image = `<img width="${__WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__["a" /* default */].width}" height="${__WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__["a" /* default */].height}" src="${__WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__["a" /* default */].url}">`;
const usage = `<svg viewBox="${__WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__["a" /* default */].viewBox}"><use xlink:href="${__WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__["a" /* default */].url}"></use></svg>`;
document.body.insertAdjacentHTML('beforeend', `${image} ${usage}`);
Object(__WEBPACK_IMPORTED_MODULE_1__dll__["a" /* dll */])();
});
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony default export */ __webpack_exports__["a"] = ({
id: "twitter-usage",
viewBox: "0 0 273.4 222.2",
url: __webpack_require__.p + "sprite.svg#twitter-usage",
toString: function () {
return this.url;
}
});
/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (immutable) */ __webpack_exports__["a"] = dll;
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__assets_facebook_svg__ = __webpack_require__(3);
// => {id string, width: string, height: string, viewBox: string, url: string}
console.log(`dll: ${__WEBPACK_IMPORTED_MODULE_0__assets_facebook_svg__["a" /* default */]}`);
let image;
let usage;
window.addEventListener('DOMContentLoaded', () => {
image = `<img width="${__WEBPACK_IMPORTED_MODULE_0__assets_facebook_svg__["a" /* default */].width}" height="${__WEBPACK_IMPORTED_MODULE_0__assets_facebook_svg__["a" /* default */].height}" src="${__WEBPACK_IMPORTED_MODULE_0__assets_facebook_svg__["a" /* default */].url}">`;
usage = `<svg viewBox="${__WEBPACK_IMPORTED_MODULE_0__assets_facebook_svg__["a" /* default */].viewBox}"><use xlink:href="${__WEBPACK_IMPORTED_MODULE_0__assets_facebook_svg__["a" /* default */].url}"></use></svg>`;
});
function dll() {
console.log('dll module');
document.body.insertAdjacentHTML('beforeend', `${image} ${usage}`);
}
/***/ }),
/* 3 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony default export */ __webpack_exports__["a"] = ({
id: "facebook-usage",
viewBox: "0 0 1000 1000",
url: __webpack_require__.p + "sprite.svg#facebook-usage",
toString: function () {
return this.url;
}
});
/***/ })
/******/ ]);

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style>
.sprite-symbol-usage {display: none;}
.sprite-symbol-usage:target {display: inline;}
</style><symbol viewBox="0 0 1000 1000" id="facebook"><path d="M990 500c0-270.6-219.4-490-490-490S10 229.4 10 500s219.4 490 490 490 490-219.4 490-490zm-935.5 0C54.5 254 254 54.5 500 54.5S945.5 254 945.5 500 746.1 945.5 500 945.5C254 945.5 54.5 746 54.5 500z" /><path d="M518.8 782.8V500h93.3l14.7-93.7h-108v-47c0-24.5 8-47.8 43.1-47.8h70.2V218h-99.6c-83.7 0-106.6 55.1-106.6 131.6v56.7h-57.5V500h57.5v282.8h92.9z" /></symbol><symbol viewBox="0 0 273.4 222.2" id="twitter"><path d="M273.4 26.3c-10.1 4.5-20.9 7.5-32.2 8.8 11.6-6.9 20.5-17.9 24.7-31-10.9 6.4-22.9 11.1-35.7 13.6A55.919 55.919 0 0 0 189.3 0c-31 0-56.1 25.1-56.1 56.1 0 4.4.5 8.7 1.5 12.8C88 66.5 46.7 44.2 19 10.3c-4.8 8.3-7.6 17.9-7.6 28.2 0 19.5 9.9 36.6 25 46.7-9.2-.3-17.8-2.8-25.4-7v.7c0 27.2 19.3 49.8 45 55-4.7 1.3-9.7 2-14.8 2-3.6 0-7.1-.4-10.6-1 7.1 22.3 27.9 38.5 52.4 39-19.2 15-43.4 24-69.7 24-4.5 0-9-.3-13.4-.8 24.8 15.9 54.3 25.2 86 25.2 103.2 0 159.6-85.5 159.6-159.6 0-2.4-.1-4.9-.2-7.3 11.1-8 20.6-17.9 28.1-29.1z" /></symbol></defs><use id="facebook-usage" xlink:href="#facebook" class="sprite-symbol-usage" /><use id="twitter-usage" xlink:href="#twitter" class="sprite-symbol-usage" /></svg>

After

(image error) Size: 1.3 KiB

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="build/dll.js"></script>
<script src="build/main.js"></script>
</head>
<body>
</body>
</html>

View file

@ -0,0 +1,18 @@
import symbolData from '../assets/facebook.svg';
// => {id string, width: string, height: string, viewBox: string, url: string}
console.log(`dll: ${symbolData}`);
let image;
let usage;
window.addEventListener('DOMContentLoaded', () => {
image = `<img width="${symbolData.width}" height="${symbolData.height}" src="${symbolData.url}">`;
usage = `<svg viewBox="${symbolData.viewBox}"><use xlink:href="${symbolData.url}"></use></svg>`;
});
export function dll() {
console.log('dll module');
document.body.insertAdjacentHTML('beforeend', `${image} ${usage}`);
}

View file

@ -0,0 +1,15 @@
import symbolData from '../assets/twitter.svg';
import { dll } from './dll';
// => {id string, width: string, height: string, viewBox: string, url: string}
console.log(`main: ${symbolData}`);
window.addEventListener('DOMContentLoaded', () => {
const image = `<img width="${symbolData.width}" height="${symbolData.height}" src="${symbolData.url}">`;
const usage = `<svg viewBox="${symbolData.viewBox}"><use xlink:href="${symbolData.url}"></use></svg>`;
document.body.insertAdjacentHTML('beforeend', `${image} ${usage}`);
dll();
});

View file

@ -0,0 +1,39 @@
const path = require('path');
const webpack = require('webpack');
const merge = require('deepmerge');
const baseConfig = require('../base-webpack.config');
const SpritePlugin = require('../../plugin');
module.exports = merge(baseConfig, {
context: __dirname,
entry: './main',
output: {
path: path.resolve(__dirname, 'build'),
publicPath: 'build/'
},
module: {
rules: [
{
test: /\.svg$/,
use: [
{
loader: 'svg-sprite-loader',
options: { extract: true }
},
'svgo-loader'
]
}
]
},
plugins: [
new webpack.DllReferencePlugin({
context: '.',
manifest: require('./build/dll-manifest.json')
}),
new SpritePlugin()
]
});

View file

@ -0,0 +1,43 @@
const path = require('path');
const merge = require('deepmerge');
const webpack = require('webpack');
const baseConfig = require('../base-webpack.config');
const SpritePlugin = require('../../plugin');
module.exports = merge(baseConfig, {
context: __dirname,
entry: {
dll: ['./dll']
},
output: {
path: path.resolve(__dirname, 'build'),
library: 'dll'
},
module: {
rules: [
{
test: /\.svg$/,
use: [
// 'svg-sprite-loader',
{
loader: 'svg-sprite-loader',
options: { extract: true, spriteFilename: 'dll.svg' }
},
'svgo-loader'
]
}
]
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, 'build', '[name]-manifest.json'),
name: 'dll'
}),
new SpritePlugin()
]
});

View file

@ -0,0 +1 @@
{"name":"dll","content":{"../../env/webpack-3/node_modules/webpack/buildin/global.js":{"id":0,"meta":{}},"./dll.js":{"id":2,"meta":{"harmonyModule":true},"exports":["dll"]},"../assets/facebook.svg":{"id":3,"meta":{"harmonyModule":true},"exports":["default"]},"../../node_modules/svg-baker-runtime/browser-symbol.js":{"id":4,"meta":{}},"../../runtime/browser-sprite.build.js":{"id":5,"meta":{}}}}

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,125 @@
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 1);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
module.exports = dll;
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__dll__ = __webpack_require__(5);
Object(__WEBPACK_IMPORTED_MODULE_1__dll__["dll"])();
/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__node_modules_svg_baker_runtime_browser_symbol_js__ = __webpack_require__(3);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__node_modules_svg_baker_runtime_browser_symbol_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__node_modules_svg_baker_runtime_browser_symbol_js__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__runtime_browser_sprite_build_js__ = __webpack_require__(4);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__runtime_browser_sprite_build_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__runtime_browser_sprite_build_js__);
var symbol = new __WEBPACK_IMPORTED_MODULE_0__node_modules_svg_baker_runtime_browser_symbol_js___default.a({
"id": "twitter",
"use": "twitter-usage",
"viewBox": "0 0 273.4 222.2",
"content": "<symbol xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 273.4 222.2\" id=\"twitter\"><path d=\"M273.4 26.3c-10.1 4.5-20.9 7.5-32.2 8.8 11.6-6.9 20.5-17.9 24.7-31-10.9 6.4-22.9 11.1-35.7 13.6A55.919 55.919 0 0 0 189.3 0c-31 0-56.1 25.1-56.1 56.1 0 4.4.5 8.7 1.5 12.8C88 66.5 46.7 44.2 19 10.3c-4.8 8.3-7.6 17.9-7.6 28.2 0 19.5 9.9 36.6 25 46.7-9.2-.3-17.8-2.8-25.4-7v.7c0 27.2 19.3 49.8 45 55-4.7 1.3-9.7 2-14.8 2-3.6 0-7.1-.4-10.6-1 7.1 22.3 27.9 38.5 52.4 39-19.2 15-43.4 24-69.7 24-4.5 0-9-.3-13.4-.8 24.8 15.9 54.3 25.2 86 25.2 103.2 0 159.6-85.5 159.6-159.6 0-2.4-.1-4.9-.2-7.3 11.1-8 20.6-17.9 28.1-29.1z\" /></symbol>"
});
var result = __WEBPACK_IMPORTED_MODULE_1__runtime_browser_sprite_build_js___default.a.add(symbol);
/* unused harmony default export */ var _unused_webpack_default_export = (symbol);
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = (__webpack_require__(0))(4);
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = (__webpack_require__(0))(5);
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = (__webpack_require__(0))(2);
/***/ })
/******/ ]);

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="build/dll.js"></script>
<script src="build/main.js"></script>
</head>
<body>
<svg>
<use xlink:href="#twitter"></use>
</svg>
<svg>
<use xlink:href="#facebook"></use>
</svg>
</body>
</html>

View file

@ -0,0 +1,5 @@
import symbol2 from '../assets/facebook.svg';
export function dll() {
console.log('dll module');
}

View file

@ -0,0 +1,4 @@
import symbol from '../assets/twitter.svg';
import { dll } from './dll';
dll();

View file

@ -0,0 +1,32 @@
const path = require('path');
const webpack = require('webpack');
const merge = require('deepmerge');
const baseConfig = require('../base-webpack.config');
module.exports = merge(baseConfig, {
context: __dirname,
entry: './main',
output: {
path: path.resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.svg$/,
use: [
'svg-sprite-loader',
'svgo-loader'
]
}
]
},
plugins: [
new webpack.DllReferencePlugin({
manifest: require('./build/dll-manifest.json')
})
]
});

View file

@ -0,0 +1,36 @@
const path = require('path');
const webpack = require('webpack');
const merge = require('deepmerge');
const baseConfig = require('../base-webpack.config');
module.exports = merge(baseConfig, {
context: __dirname,
entry: {
dll: ['./dll']
},
output: {
path: path.resolve(__dirname, 'build'),
library: 'dll'
},
module: {
rules: [
{
test: /\.svg$/,
use: [
'svg-sprite-loader',
'svgo-loader'
]
}
]
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, 'build', '[name]-manifest.json'),
name: 'dll'
})
]
});

View file

@ -0,0 +1,29 @@
# Default browser runtime example
In browser sprite is rendered and injected in page automatically, you just refer to images via `<svg><use xlink:href="#id"></use></svg>`.
### [Demo](demo.html)
Input
```js
import twitterIcon from '../assets/twitter.svg';
```
Reference in HTML
```html
<svg>
<use xlink:href="#twitter"></use>
</svg>
```
### Input
- [main.js](main.js)
- [demo.html](demo.html)
- [webpack.config.js](webpack.config.js)
### Output
- [build/main.js](build/main.js)

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="build/main.js"></script>
</head>
<body>
<svg>
<use xlink:href="#twitter"></use>
</svg>
</body>
</html>

View file

@ -0,0 +1 @@
import symbol from '../assets/twitter.svg';

View file

@ -0,0 +1,25 @@
const path = require('path');
const merge = require('deepmerge');
const baseConfig = require('../base-webpack.config');
module.exports = merge(baseConfig, {
context: __dirname,
entry: './main',
output: {
path: path.resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.svg$/,
use: [
'svg-sprite-loader',
'svgo-loader'
]
}
]
}
});

View file

@ -0,0 +1,97 @@
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "build/";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__ = __webpack_require__(1);
// => {width: string, height: string, viewBox: string, url: string}
console.log(__WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__["a" /* default */]);
window.addEventListener('DOMContentLoaded', () => {
const image = `<img src="${__WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__["a" /* default */].url}" width="${__WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__["a" /* default */].width}" height="${__WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__["a" /* default */].height}">`;
document.body.innerHTML = image;
});
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony default export */ __webpack_exports__["a"] = ({
"width": 273,
"height": 222,
"viewBox": "0 0 273.4 222.2",
"url": "build/sprite.svg#twitter-usage"
});
/***/ })
/******/ ]);

View file

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style>
.sprite-symbol-usage {display: none;}
.sprite-symbol-usage:target {display: inline;}
</style><symbol viewBox="0 0 273.4 222.2" id="twitter">
<path d="M273.4,26.3c-10.1,4.5-20.9,7.5-32.2,8.8c11.6-6.9,20.5-17.9,24.7-31C255,10.5,243,15.2,230.2,17.7
C220,6.8,205.4,0,189.3,0c-31,0-56.1,25.1-56.1,56.1c0,4.4,0.5,8.7,1.5,12.8C88,66.5,46.7,44.2,19,10.3c-4.8,8.3-7.6,17.9-7.6,28.2
c0,19.5,9.9,36.6,25,46.7c-9.2-0.3-17.8-2.8-25.4-7c0,0.2,0,0.5,0,0.7c0,27.2,19.3,49.8,45,55c-4.7,1.3-9.7,2-14.8,2
c-3.6,0-7.1-0.4-10.6-1c7.1,22.3,27.9,38.5,52.4,39c-19.2,15-43.4,24-69.7,24c-4.5,0-9-0.3-13.4-0.8c24.8,15.9,54.3,25.2,86,25.2
c103.2,0,159.6-85.5,159.6-159.6c0-2.4-0.1-4.9-0.2-7.3C256.4,47.4,265.9,37.5,273.4,26.3z" />
</symbol></defs><use id="twitter-usage" xlink:href="#twitter" class="sprite-symbol-usage" /></svg>

After

(image error) Size: 912 B

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="build/main.js"></script>
</head>
<body>
</body>
</html>

View file

@ -0,0 +1,19 @@
const { generateSpritePlaceholder, stringify } = require('../../lib/utils');
module.exports = function runtimeGenerator({ symbol, loaderContext }) {
// this will be replaced with real symbol url, e.g. sprite.svg#twitter-usage
const publicPath = loaderContext._compiler.options.output.publicPath;
const spritePlaceholder = generateSpritePlaceholder(symbol.request.file);
const viewBoxParts = symbol.viewBox.split(' ');
const width = parseInt(viewBoxParts[2], 10);
const height = parseInt(viewBoxParts[3], 10);
const data = {
width,
height,
viewBox: symbol.viewBox,
url: publicPath + spritePlaceholder
};
return `export default ${stringify(data)}`;
};

View file

@ -0,0 +1,9 @@
import symbolData from '../assets/twitter.svg';
// => {width: string, height: string, viewBox: string, url: string}
console.log(symbolData);
window.addEventListener('DOMContentLoaded', () => {
const image = `<img src="${symbolData.url}" width="${symbolData.width}" height="${symbolData.height}">`;
document.body.innerHTML = image;
});

View file

@ -0,0 +1,33 @@
const path = require('path');
const merge = require('deepmerge');
const baseConfig = require('../base-webpack.config');
const SpritePlugin = require('../../plugin');
const config = merge(baseConfig, {
context: __dirname,
entry: './main',
output: {
path: path.resolve(__dirname, 'build'),
publicPath: 'build/'
},
module: {
rules: [
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
options: {
extract: true,
runtimeGenerator: require.resolve('./extracting-runtime-generator.js')
}
}
]
},
plugins: [
new SpritePlugin()
]
});
module.exports = config;

View file

@ -0,0 +1,59 @@
# Custom runtime generating example
Runtime code generated by loader could be overridden by providing custom generator via `runtimeGenerator` option.
For example you can return React component preconfigured with imported symbol data instead of default [symbol instance](https://github.com/JetBrains/svg-baker/blob/master/packages/svg-baker-runtime/src/symbol.js).
### [Demo](demo.html)
### Config
- [webpack.config.js](webpack.config.js)
- [svg-to-icon-component-runtime-generator.js](svg-to-icon-component-runtime-generator.js)
### Input
- [main.jsx](main.jsx)
- [icon.jsx](icon.jsx)
This import:
```js
import TwitterIcon from '../assets/twitter.svg';
```
Will be generated to:
```js
import React from 'react';
import SpriteSymbol from 'svg-sprite-loader/runtime/symbol';
import sprite from 'svg-sprite-loader/runtime/browser-sprite';
import SpriteSymbolComponent from './icon.jsx';
const symbol = new SpriteSymbol({ /* symbol data */ });
sprite.add(symbol);
export default class TwitterIcon extends React.Component {
render() {
return <SpriteSymbolComponent glyph="${symbol.id}" {...this.props} />;
}
}
```
So when you import SVG, actually React component returns with configured glyph:
```js
import TwitterIcon from '../assets/twitter.svg';
render(
<div>
<TwitterIcon width="100" />
<TwitterIcon fill="red" style={{width: 300}} />
<TwitterIcon fill="blue" style={{width: 600}} />
</div>,
document.querySelector('.app')
);
```
### Output
- [build/main.js](build/main.js)

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="build/main.js"></script>
</head>
<body>
<div class="app"></div>
</body>
</html>

View file

@ -0,0 +1,18 @@
import React, {PureComponent} from 'react';
export default class Icon extends PureComponent {
render() {
const {className, glyph, ...restProps} = this.props;
return (
<svg className={className} {...restProps}>
<use xlinkHref={`#${glyph}`} />
</svg>
);
}
}
Icon.defaultProps = {
glyph: '',
className: 'icon'
};

View file

@ -0,0 +1,14 @@
import React from 'react';
import { render } from 'react-dom';
import TwitterIcon from '../assets/twitter.svg';
import WikipediaIcon from '../assets/wikipedia.svg';
document.addEventListener('DOMContentLoaded', () => {
render(
<div>
<TwitterIcon width="100" />
<WikipediaIcon width="200" />
</div>,
document.querySelector('.app')
);
});

View file

@ -0,0 +1,35 @@
const path = require('path');
const pascalCase = require('pascal-case');
const { stringifyRequest } = require('loader-utils');
const { stringifySymbol, stringify } = require('../../lib/utils');
module.exports = function runtimeGenerator({ symbol, config, context, loaderContext }) {
const { spriteModule, symbolModule, runtimeOptions } = config;
const compilerContext = loaderContext._compiler.context;
const iconModulePath = path.resolve(compilerContext, runtimeOptions.iconModule);
const iconModuleRequest = stringify(
path.relative(path.dirname(symbol.request.file), iconModulePath)
);
const spriteRequest = stringifyRequest({ context }, spriteModule);
const symbolRequest = stringifyRequest({ context }, symbolModule);
const parentComponentDisplayName = 'SpriteSymbolComponent';
const displayName = `${pascalCase(symbol.id)}${parentComponentDisplayName}`;
return `
import React from 'react';
import SpriteSymbol from ${symbolRequest};
import sprite from ${spriteRequest};
import ${parentComponentDisplayName} from ${iconModuleRequest};
const symbol = new SpriteSymbol(${stringifySymbol(symbol)});
sprite.add(symbol);
export default class ${displayName} extends React.Component {
render() {
return <${parentComponentDisplayName} glyph="${symbol.id}" {...this.props} />;
}
}
`;
};

View file

@ -0,0 +1,48 @@
const path = require('path');
const merge = require('deepmerge');
const baseConfig = require('../base-webpack.config');
const babelOptions = {
presets: ['react', 'es2015'],
plugins: ['transform-object-rest-spread']
};
const config = merge(baseConfig, {
context: __dirname,
entry: './main.jsx',
output: {
path: path.resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.jsx$/,
loader: 'babel-loader',
options: babelOptions
},
{
test: /\.svg$/,
use: [
{
loader: 'babel-loader',
options: babelOptions
},
{
loader: 'svg-sprite-loader',
options: {
runtimeGenerator: require.resolve('./svg-to-icon-component-runtime-generator'),
runtimeOptions: {
iconModule: './icon.jsx' // Relative to current build context folder
}
}
}
],
}
]
}
});
module.exports = config;

View file

@ -0,0 +1,55 @@
# Extracted sprite example
Extract SVG sprite as separate file with `extract: true` option (see [webpack config](webpack.config.js)).
When loader is in extract mode, the returning value is extracted sprite file URL with symbol id at the end, e.g. `sprite.svg#symbolId`.
This makes possible to use [SVG stacking technique](https://css-tricks.com/svg-fragment-identifiers-work/#article-header-id-4) which
[supported by most of browsers](http://caniuse.com/#feat=svg-fragment) except of Safari (both desktop and mobile) and Android browser prior to 4.4.4.
### [Demo](build/main.html)
### Import from JS
[Input](main.js)
```js
import './logo.svg';
```
[Output](build/main.js#L87)
```js
module.exports = 'sprite.svg#logo-usage';
```
### Import from CSS
[Input](main.css)
```css
.logo {background: url('./logo.svg')}
```
[Output](build/main.css)
```css
.logo {background: url('sprite.svg#logo-usage')}
```
### Import from HTML
[Input](main.html)
```html
<img src="./logo.svg" alt="">
```
[Output](build/main.html)
```html
<img src="sprite.svg#logo-usage" alt="">
```
- [sprite.svg](build/sprite-c9cbc8.svg)
- [main.html](build/main.html)
- [main.css](build/main.css)
- [main.js](build/main.js)

View file

@ -0,0 +1,6 @@
.twitter-logo {
width: 200px;
height: 200px;
background: url(sprite-de3584.svg#twitter-usage) no-repeat;
background-size: contain;
}

View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Sprite image embedded in entry.html (which processed by html-loader and extracted by extract-text-webpack-plugin)</h1>
<img src="sprite-de3584.svg#twitter-usage" alt="">
<h1>Sprite image embedded as background-image in main.css (which processed by css-loader and extracted by extract-text-webpack-plugin)</h1>
<link rel="stylesheet" href="main.css">
<div class="twitter-logo"></div>
</body>
</html>

View file

@ -0,0 +1,111 @@
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__main_css__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__main_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__main_css__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__main_html__ = __webpack_require__(3);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__main_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__main_html__);
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony default export */ __webpack_exports__["default"] = ({
id: "twitter-usage",
viewBox: "0 0 273.4 222.2",
url: __webpack_require__.p + "sprite-de3584.svg#twitter-usage",
toString: function () {
return this.url;
}
});
/***/ }),
/* 2 */
/***/ (function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ }),
/* 3 */
/***/ (function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ })
/******/ ]);

View file

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style>
.sprite-symbol-usage {display: none;}
.sprite-symbol-usage:target {display: inline;}
</style>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<symbol version="1.1" id="twitter_Layer_1" x="0px" y="0px" width="273.4px" height="222.2px" viewBox="0 0 273.4 222.2" style="enable-background:new 0 0 273.4 222.2;" xml:space="preserve">
<path d="M273.4,26.3c-10.1,4.5-20.9,7.5-32.2,8.8c11.6-6.9,20.5-17.9,24.7-31C255,10.5,243,15.2,230.2,17.7
C220,6.8,205.4,0,189.3,0c-31,0-56.1,25.1-56.1,56.1c0,4.4,0.5,8.7,1.5,12.8C88,66.5,46.7,44.2,19,10.3c-4.8,8.3-7.6,17.9-7.6,28.2
c0,19.5,9.9,36.6,25,46.7c-9.2-0.3-17.8-2.8-25.4-7c0,0.2,0,0.5,0,0.7c0,27.2,19.3,49.8,45,55c-4.7,1.3-9.7,2-14.8,2
c-3.6,0-7.1-0.4-10.6-1c7.1,22.3,27.9,38.5,52.4,39c-19.2,15-43.4,24-69.7,24c-4.5,0-9-0.3-13.4-0.8c24.8,15.9,54.3,25.2,86,25.2
c103.2,0,159.6-85.5,159.6-159.6c0-2.4-0.1-4.9-0.2-7.3C256.4,47.4,265.9,37.5,273.4,26.3z" />
</symbol>
</defs><use id="twitter-usage" xlink:href="#twitter" class="sprite-symbol-usage" /></svg>

After

(image error) Size: 1.1 KiB

View file

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style>
.sprite-symbol-usage {display: none;}
.sprite-symbol-usage:target {display: inline;}
</style><symbol viewBox="0 0 273.4 222.2" id="twitter">
<path d="M273.4,26.3c-10.1,4.5-20.9,7.5-32.2,8.8c11.6-6.9,20.5-17.9,24.7-31C255,10.5,243,15.2,230.2,17.7
C220,6.8,205.4,0,189.3,0c-31,0-56.1,25.1-56.1,56.1c0,4.4,0.5,8.7,1.5,12.8C88,66.5,46.7,44.2,19,10.3c-4.8,8.3-7.6,17.9-7.6,28.2
c0,19.5,9.9,36.6,25,46.7c-9.2-0.3-17.8-2.8-25.4-7c0,0.2,0,0.5,0,0.7c0,27.2,19.3,49.8,45,55c-4.7,1.3-9.7,2-14.8,2
c-3.6,0-7.1-0.4-10.6-1c7.1,22.3,27.9,38.5,52.4,39c-19.2,15-43.4,24-69.7,24c-4.5,0-9-0.3-13.4-0.8c24.8,15.9,54.3,25.2,86,25.2
c103.2,0,159.6-85.5,159.6-159.6c0-2.4-0.1-4.9-0.2-7.3C256.4,47.4,265.9,37.5,273.4,26.3z" />
</symbol></defs><use id="twitter-usage" xlink:href="#twitter" class="sprite-symbol-usage" /></svg>

After

(image error) Size: 912 B

View file

@ -0,0 +1,6 @@
.twitter-logo {
width: 200px;
height: 200px;
background: url('../assets/twitter.svg') no-repeat;
background-size: contain;
}

View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Sprite image embedded in entry.html (which processed by html-loader and extracted by extract-text-webpack-plugin)</h1>
<img src="../assets/twitter.svg" alt="">
<h1>Sprite image embedded as background-image in main.css (which processed by css-loader and extracted by extract-text-webpack-plugin)</h1>
<link rel="stylesheet" href="main.css">
<div class="twitter-logo"></div>
</body>
</html>

View file

@ -0,0 +1,4 @@
import '../assets/twitter.svg';
import './main.css';
import './main.html';

View file

@ -0,0 +1,48 @@
/* eslint-disable import/no-extraneous-dependencies */
const path = require('path');
const merge = require('deepmerge');
const TextExtractPlugin = require('extract-text-webpack-plugin');
const baseConfig = require('../base-webpack.config');
const SpritePlugin = require('../../plugin');
const CSSExtractor = new TextExtractPlugin('[name].css');
const HTMLExtractor = new TextExtractPlugin('[name].html');
const config = merge(baseConfig, {
context: __dirname,
entry: './main',
output: {
path: path.resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
options: {
extract: true,
spriteFilename: 'sprite-[hash:6].svg'
}
},
{
test: /\.css$/,
loader: CSSExtractor.extract({ use: 'css-loader' })
},
{
test: /\.html$/,
loader: HTMLExtractor.extract({ use: 'html-loader' })
}
]
},
plugins: [
CSSExtractor,
HTMLExtractor,
new SpritePlugin()
]
});
module.exports = config;

View file

@ -0,0 +1,23 @@
# HTML webpack plugin interop
When using [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) along with sprite-loader in extract mode it is possible
to inline sprite content directly to the page. All extracted sprites stored in `htmlWebpackPlugin.files.sprites` template variable.
It's an object where key is a sprite filename and value - file contents (`Object<filename:string, content:string>`).
### [Demo](build/index.html)
### Template example
```ejs
...
<body>
<% if (htmlWebpackPlugin.files.sprites) { %>
<% for (var spriteFileName in htmlWebpackPlugin.files.sprites) { %>
<%= htmlWebpackPlugin.files.sprites[spriteFileName] %>
<% } %>
<% } %>
</body>
...
```

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><symbol viewBox="0 0 1000 1000" id="facebook">
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
<g><g><g><path d="M990,500c0-270.6-219.4-490-490-490C229.4,10,10,229.4,10,500c0,270.6,219.4,490,490,490C770.6,990,990,770.6,990,500z M54.5,500C54.5,254,254,54.5,500,54.5C746,54.5,945.5,254,945.5,500c0,246-199.4,445.5-445.5,445.5C254,945.5,54.5,746,54.5,500z" /><path d="M518.8,782.8V500h93.3l14.7-93.7H518.8v-47c0-24.5,8-47.8,43.1-47.8h70.2v-93.5h-99.6c-83.7,0-106.6,55.1-106.6,131.6v56.7h-57.5V500h57.5v282.8H518.8L518.8,782.8z" /></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></g>
</symbol><symbol viewBox="0 0 273.4 222.2" id="twitter">
<path d="M273.4,26.3c-10.1,4.5-20.9,7.5-32.2,8.8c11.6-6.9,20.5-17.9,24.7-31C255,10.5,243,15.2,230.2,17.7
C220,6.8,205.4,0,189.3,0c-31,0-56.1,25.1-56.1,56.1c0,4.4,0.5,8.7,1.5,12.8C88,66.5,46.7,44.2,19,10.3c-4.8,8.3-7.6,17.9-7.6,28.2
c0,19.5,9.9,36.6,25,46.7c-9.2-0.3-17.8-2.8-25.4-7c0,0.2,0,0.5,0,0.7c0,27.2,19.3,49.8,45,55c-4.7,1.3-9.7,2-14.8,2
c-3.6,0-7.1-0.4-10.6-1c7.1,22.3,27.9,38.5,52.4,39c-19.2,15-43.4,24-69.7,24c-4.5,0-9-0.3-13.4-0.8c24.8,15.9,54.3,25.2,86,25.2
c103.2,0,159.6-85.5,159.6-159.6c0-2.4-0.1-4.9-0.2-7.3C256.4,47.4,265.9,37.5,273.4,26.3z" />
</symbol></defs></svg>
<svg>
<use xlink:href="#twitter"></use>
</svg>
<svg>
<use xlink:href="#facebook"></use>
</svg>
<script type="text/javascript" src="main.js"></script></body>
</html>

View file

@ -0,0 +1,107 @@
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__assets_facebook_svg__ = __webpack_require__(2);
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* unused harmony default export */ var _unused_webpack_default_export = ({
id: "twitter-usage",
viewBox: "0 0 273.4 222.2",
url: __webpack_require__.p + "sprite.svg#twitter",
toString: function () {
return this.url;
}
});
/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* unused harmony default export */ var _unused_webpack_default_export = ({
id: "facebook-usage",
viewBox: "0 0 1000 1000",
url: __webpack_require__.p + "sprite.svg#facebook",
toString: function () {
return this.url;
}
});
/***/ })
/******/ ]);

View file

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><symbol viewBox="0 0 1000 1000" id="facebook">
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
<g><g><g><path d="M990,500c0-270.6-219.4-490-490-490C229.4,10,10,229.4,10,500c0,270.6,219.4,490,490,490C770.6,990,990,770.6,990,500z M54.5,500C54.5,254,254,54.5,500,54.5C746,54.5,945.5,254,945.5,500c0,246-199.4,445.5-445.5,445.5C254,945.5,54.5,746,54.5,500z" /><path d="M518.8,782.8V500h93.3l14.7-93.7H518.8v-47c0-24.5,8-47.8,43.1-47.8h70.2v-93.5h-99.6c-83.7,0-106.6,55.1-106.6,131.6v56.7h-57.5V500h57.5v282.8H518.8L518.8,782.8z" /></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></g>
</symbol><symbol viewBox="0 0 273.4 222.2" id="twitter">
<path d="M273.4,26.3c-10.1,4.5-20.9,7.5-32.2,8.8c11.6-6.9,20.5-17.9,24.7-31C255,10.5,243,15.2,230.2,17.7
C220,6.8,205.4,0,189.3,0c-31,0-56.1,25.1-56.1,56.1c0,4.4,0.5,8.7,1.5,12.8C88,66.5,46.7,44.2,19,10.3c-4.8,8.3-7.6,17.9-7.6,28.2
c0,19.5,9.9,36.6,25,46.7c-9.2-0.3-17.8-2.8-25.4-7c0,0.2,0,0.5,0,0.7c0,27.2,19.3,49.8,45,55c-4.7,1.3-9.7,2-14.8,2
c-3.6,0-7.1-0.4-10.6-1c7.1,22.3,27.9,38.5,52.4,39c-19.2,15-43.4,24-69.7,24c-4.5,0-9-0.3-13.4-0.8c24.8,15.9,54.3,25.2,86,25.2
c103.2,0,159.6-85.5,159.6-159.6c0-2.4-0.1-4.9-0.2-7.3C256.4,47.4,265.9,37.5,273.4,26.3z" />
</symbol></defs></svg>

After

(image error) Size: 1.4 KiB

View file

@ -0,0 +1,2 @@
import '../assets/twitter.svg';
import '../assets/facebook.svg';

View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<% if (htmlWebpackPlugin.files.sprites) { %>
<% for (var spriteFileName in htmlWebpackPlugin.files.sprites) { %>
<%= htmlWebpackPlugin.files.sprites[spriteFileName] %>
<% } %>
<% } %>
<svg>
<use xlink:href="#twitter"></use>
</svg>
<svg>
<use xlink:href="#facebook"></use>
</svg>
</body>
</html>

View file

@ -0,0 +1,39 @@
/* eslint-disable import/no-extraneous-dependencies */
const path = require('path');
const merge = require('deepmerge');
const baseConfig = require('../base-webpack.config');
const SpritePlugin = require('../../plugin');
const HtmlPlugin = require('html-webpack-plugin');
const config = merge(baseConfig, {
context: __dirname,
entry: './main',
output: {
path: path.resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
options: { extract: true }
}
]
},
plugins: [
new HtmlPlugin({
filename: 'index.html',
template: path.resolve(__dirname, 'template.ejs')
}),
new SpritePlugin({
plainSprite: true
})
]
});
module.exports = config;

View file

@ -0,0 +1,42 @@
# Server side rendering example
When webpack config target option is 'node' svg-sprite-loader will use isomorphic runtime sprite module.
### [Demo](build/index.html)
### Input
[main.js](main.js)
```js
import symbol from '../assets/twitter.svg';
// Import sprite instance which already contains twitter logo required above
import sprite from 'svg-sprite-loader/runtime/sprite.build';
// Render sprite
const spriteContent = sprite.stringify();
const pageContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
${spriteContent}
<svg viewBox="${symbol.viewBox}">
<use xlink:href="#${symbol.id}"></use>
</svg>
</body>
</html>
`;
console.log(pageContent);
```
### Output
- [build/main.js](build/main.js)
- [build/index.html](build/index.html)

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0">
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<symbol viewBox="0 0 273.4 222.2" id="twitter">
<path d="M273.4,26.3c-10.1,4.5-20.9,7.5-32.2,8.8c11.6-6.9,20.5-17.9,24.7-31C255,10.5,243,15.2,230.2,17.7
C220,6.8,205.4,0,189.3,0c-31,0-56.1,25.1-56.1,56.1c0,4.4,0.5,8.7,1.5,12.8C88,66.5,46.7,44.2,19,10.3c-4.8,8.3-7.6,17.9-7.6,28.2
c0,19.5,9.9,36.6,25,46.7c-9.2-0.3-17.8-2.8-25.4-7c0,0.2,0,0.5,0,0.7c0,27.2,19.3,49.8,45,55c-4.7,1.3-9.7,2-14.8,2
c-3.6,0-7.1-0.4-10.6-1c7.1,22.3,27.9,38.5,52.4,39c-19.2,15-43.4,24-69.7,24c-4.5,0-9-0.3-13.4-0.8c24.8,15.9,54.3,25.2,86,25.2
c103.2,0,159.6-85.5,159.6-159.6c0-2.4-0.1-4.9-0.2-7.3C256.4,47.4,265.9,37.5,273.4,26.3z" />
</symbol>
</svg>
<svg viewBox="0 0 273.4 222.2">
<use xlink:href="#twitter"></use>
</svg>
</body>
</html>

View file

@ -0,0 +1,418 @@
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 1);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
(function (global, factory) {
true ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.Sprite = factory());
}(this, (function () { 'use strict';
var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
var deepmerge$1 = createCommonjsModule(function (module, exports) {
(function (root, factory) {
if (false) {
undefined(factory);
} else {
module.exports = factory();
}
}(commonjsGlobal, function () {
function isMergeableObject(val) {
var nonNullObject = val && typeof val === 'object';
return nonNullObject
&& Object.prototype.toString.call(val) !== '[object RegExp]'
&& Object.prototype.toString.call(val) !== '[object Date]'
}
function emptyTarget(val) {
return Array.isArray(val) ? [] : {}
}
function cloneIfNecessary(value, optionsArgument) {
var clone = optionsArgument && optionsArgument.clone === true;
return (clone && isMergeableObject(value)) ? deepmerge(emptyTarget(value), value, optionsArgument) : value
}
function defaultArrayMerge(target, source, optionsArgument) {
var destination = target.slice();
source.forEach(function(e, i) {
if (typeof destination[i] === 'undefined') {
destination[i] = cloneIfNecessary(e, optionsArgument);
} else if (isMergeableObject(e)) {
destination[i] = deepmerge(target[i], e, optionsArgument);
} else if (target.indexOf(e) === -1) {
destination.push(cloneIfNecessary(e, optionsArgument));
}
});
return destination
}
function mergeObject(target, source, optionsArgument) {
var destination = {};
if (isMergeableObject(target)) {
Object.keys(target).forEach(function (key) {
destination[key] = cloneIfNecessary(target[key], optionsArgument);
});
}
Object.keys(source).forEach(function (key) {
if (!isMergeableObject(source[key]) || !target[key]) {
destination[key] = cloneIfNecessary(source[key], optionsArgument);
} else {
destination[key] = deepmerge(target[key], source[key], optionsArgument);
}
});
return destination
}
function deepmerge(target, source, optionsArgument) {
var array = Array.isArray(source);
var options = optionsArgument || { arrayMerge: defaultArrayMerge };
var arrayMerge = options.arrayMerge || defaultArrayMerge;
if (array) {
return Array.isArray(target) ? arrayMerge(target, source, optionsArgument) : cloneIfNecessary(source, optionsArgument)
} else {
return mergeObject(target, source, optionsArgument)
}
}
deepmerge.all = function deepmergeAll(array, optionsArgument) {
if (!Array.isArray(array) || array.length < 2) {
throw new Error('first argument should be an array with at least two elements')
}
// we are sure there are at least 2 values, so it is safe to have no initial value
return array.reduce(function(prev, next) {
return deepmerge(prev, next, optionsArgument)
})
};
return deepmerge
}));
});
var namespaces_1 = createCommonjsModule(function (module, exports) {
var namespaces = {
svg: {
name: 'xmlns',
uri: 'http://www.w3.org/2000/svg'
},
xlink: {
name: 'xmlns:xlink',
uri: 'http://www.w3.org/1999/xlink'
}
};
exports.default = namespaces;
module.exports = exports.default;
});
/**
* @param {Object} attrs
* @return {string}
*/
var objectToAttrsString = function (attrs) {
return Object.keys(attrs).map(function (attr) {
var value = attrs[attr].toString().replace(/"/g, '&quot;');
return (attr + "=\"" + value + "\"");
}).join(' ');
};
var svg = namespaces_1.svg;
var xlink = namespaces_1.xlink;
var defaultAttrs = {};
defaultAttrs[svg.name] = svg.uri;
defaultAttrs[xlink.name] = xlink.uri;
/**
* @param {string} [content]
* @param {Object} [attributes]
* @return {string}
*/
var wrapInSvgString = function (content, attributes) {
if ( content === void 0 ) content = '';
var attrs = deepmerge$1(defaultAttrs, attributes || {});
var attrsRendered = objectToAttrsString(attrs);
return ("<svg " + attrsRendered + ">" + content + "</svg>");
};
var svg$1 = namespaces_1.svg;
var xlink$1 = namespaces_1.xlink;
var defaultConfig = {
attrs: ( obj = {
style: ['position: absolute', 'width: 0', 'height: 0'].join('; '),
'aria-hidden': 'true'
}, obj[svg$1.name] = svg$1.uri, obj[xlink$1.name] = xlink$1.uri, obj )
};
var obj;
var Sprite = function Sprite(config) {
this.config = deepmerge$1(defaultConfig, config || {});
this.symbols = [];
};
/**
* Add new symbol. If symbol with the same id exists it will be replaced.
* @param {SpriteSymbol} symbol
* @return {boolean} `true` - symbol was added, `false` - replaced
*/
Sprite.prototype.add = function add (symbol) {
var ref = this;
var symbols = ref.symbols;
var existing = this.find(symbol.id);
if (existing) {
symbols[symbols.indexOf(existing)] = symbol;
return false;
}
symbols.push(symbol);
return true;
};
/**
* Remove symbol & destroy it
* @param {string} id
* @return {boolean} `true` - symbol was found & successfully destroyed, `false` - otherwise
*/
Sprite.prototype.remove = function remove (id) {
var ref = this;
var symbols = ref.symbols;
var symbol = this.find(id);
if (symbol) {
symbols.splice(symbols.indexOf(symbol), 1);
symbol.destroy();
return true;
}
return false;
};
/**
* @param {string} id
* @return {SpriteSymbol|null}
*/
Sprite.prototype.find = function find (id) {
return this.symbols.filter(function (s) { return s.id === id; })[0] || null;
};
/**
* @param {string} id
* @return {boolean}
*/
Sprite.prototype.has = function has (id) {
return this.find(id) !== null;
};
/**
* @return {string}
*/
Sprite.prototype.stringify = function stringify () {
var ref = this.config;
var attrs = ref.attrs;
var stringifiedSymbols = this.symbols.map(function (s) { return s.stringify(); }).join('');
return wrapInSvgString(stringifiedSymbols, attrs);
};
/**
* @return {string}
*/
Sprite.prototype.toString = function toString () {
return this.stringify();
};
Sprite.prototype.destroy = function destroy () {
this.symbols.forEach(function (s) { return s.destroy(); });
};
var sprite = new Sprite({ attrs: { id: '__SVG_SPRITE_NODE__' } });
return sprite;
})));
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_svg_sprite_loader_runtime_sprite_build__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_svg_sprite_loader_runtime_sprite_build___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_svg_sprite_loader_runtime_sprite_build__);
// Import sprite instance which already contains twitter logo required above
// Render sprite
const spriteContent = __WEBPACK_IMPORTED_MODULE_1_svg_sprite_loader_runtime_sprite_build___default.a.stringify();
const pageContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
${spriteContent}
<svg viewBox="${__WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__["a" /* default */].viewBox}">
<use xlink:href="#${__WEBPACK_IMPORTED_MODULE_0__assets_twitter_svg__["a" /* default */].id}"></use>
</svg>
</body>
</html>
`;
console.log(pageContent);
/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__node_modules_svg_baker_runtime_symbol_js__ = __webpack_require__(3);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__node_modules_svg_baker_runtime_symbol_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__node_modules_svg_baker_runtime_symbol_js__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__runtime_sprite_build_js__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__runtime_sprite_build_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__runtime_sprite_build_js__);
var symbol = new __WEBPACK_IMPORTED_MODULE_0__node_modules_svg_baker_runtime_symbol_js___default.a({
"id": "twitter",
"use": "twitter-usage",
"viewBox": "0 0 273.4 222.2",
"content": "<symbol xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 273.4 222.2\" id=\"twitter\">\n<path d=\"M273.4,26.3c-10.1,4.5-20.9,7.5-32.2,8.8c11.6-6.9,20.5-17.9,24.7-31C255,10.5,243,15.2,230.2,17.7\n\tC220,6.8,205.4,0,189.3,0c-31,0-56.1,25.1-56.1,56.1c0,4.4,0.5,8.7,1.5,12.8C88,66.5,46.7,44.2,19,10.3c-4.8,8.3-7.6,17.9-7.6,28.2\n\tc0,19.5,9.9,36.6,25,46.7c-9.2-0.3-17.8-2.8-25.4-7c0,0.2,0,0.5,0,0.7c0,27.2,19.3,49.8,45,55c-4.7,1.3-9.7,2-14.8,2\n\tc-3.6,0-7.1-0.4-10.6-1c7.1,22.3,27.9,38.5,52.4,39c-19.2,15-43.4,24-69.7,24c-4.5,0-9-0.3-13.4-0.8c24.8,15.9,54.3,25.2,86,25.2\n\tc103.2,0,159.6-85.5,159.6-159.6c0-2.4-0.1-4.9-0.2-7.3C256.4,47.4,265.9,37.5,273.4,26.3z\" />\n</symbol>"
});
var result = __WEBPACK_IMPORTED_MODULE_1__runtime_sprite_build_js___default.a.add(symbol);
/* harmony default export */ __webpack_exports__["a"] = (symbol);
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
(function (global, factory) {
true ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.SpriteSymbol = factory());
}(this, (function () { 'use strict';
var SpriteSymbol = function SpriteSymbol(ref) {
var id = ref.id;
var viewBox = ref.viewBox;
var content = ref.content;
this.id = id;
this.viewBox = viewBox;
this.content = content;
};
/**
* @return {string}
*/
SpriteSymbol.prototype.stringify = function stringify () {
return this.content;
};
/**
* @return {string}
*/
SpriteSymbol.prototype.toString = function toString () {
return this.stringify();
};
SpriteSymbol.prototype.destroy = function destroy () {
var this$1 = this;
['id', 'viewBox', 'content'].forEach(function (prop) { return delete this$1[prop]; });
};
return SpriteSymbol;
})));
/***/ })
/******/ ]);

View file

@ -0,0 +1,25 @@
import symbol from '../assets/twitter.svg';
// Import sprite instance which already contains twitter logo required above
import sprite from 'svg-sprite-loader/runtime/sprite.build';
// Render sprite
const spriteContent = sprite.stringify();
const pageContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
${spriteContent}
<svg viewBox="${symbol.viewBox}">
<use xlink:href="#${symbol.id}"></use>
</svg>
</body>
</html>
`;
console.log(pageContent);

View file

@ -0,0 +1,24 @@
const path = require('path');
const merge = require('deepmerge');
const baseConfig = require('../base-webpack.config');
module.exports = merge(baseConfig, {
context: __dirname,
entry: './main',
output: {
path: path.resolve(__dirname, 'build')
},
target: 'node',
module: {
rules: [
{
test: /\.svg$/,
loader: 'svg-sprite-loader'
}
]
}
});

View file

@ -0,0 +1,94 @@
/* eslint-disable max-len */
const fs = require('fs');
const PACKAGE_NAME = require('../package.json').name;
module.exports = {
PACKAGE_NAME,
NAMESPACE: fs.realpathSync(__dirname),
EXTRACTABLE_MODULE_ISSUER_PATTERN: /\.(css|sass|scss|less|styl|html)$/i,
SPRITE_PLACEHOLDER_PATTERN: /\{\{sprite-filename\|([^}}]*)\}\};?/gi,
/**
* Overridable loader options
* @typedef {Object} SVGSpriteLoaderConfig
*/
loader: {
/**
* How `<symbol id>` should be named.
* Full list of supported patterns see at [loader-utils#interpolatename docs](https://github.com/webpack/loader-utils#interpolatename).
* @type {string}
*/
symbolId: '[name]',
/**
* Regular expression passed to interpolateName.
* Supports the interpolateName [N] pattern inserting the N-th match.
* @type {string}
*/
symbolRegExp: '',
/**
* Path to Node.js module which generates client runtime.
* @type {string}
*/
runtimeGenerator: require.resolve('./runtime-generator'),
/**
* Arbitrary data passed to runtime generator.
* @type {*}
*/
runtimeOptions: undefined,
/**
* Should runtime be compatible with earlier v0.* loader versions.
* Will be removed in 3 version.
* @type {boolean}
* @deprecated
*/
runtimeCompat: false,
/**
* Path to sprite module which will be compiled and executed at runtime.
* By default depends on 'target' webpack config option:
* - `svg-sprite-loader/runtime/browser-sprite.build` for 'web' target.
* - `svg-sprite-loader/runtime/sprite.build` for all other targets.
* @type {string}
* @autoconfigured
*/
spriteModule: require.resolve('../runtime/browser-sprite.build'),
/**
* Path to symbol module.
* By default depends on 'target' webpack config option:
* - `svg-baker-runtime/browser-symbol` for 'web' target.
* - `svg-baker-runtime/symbol` for all other targets.
* @type {string}
* @autoconfigured
*/
symbolModule: require.resolve('svg-baker-runtime/browser-symbol'),
/**
* Generated export format:
* - when `true` loader will produce `export default ...`.
* - when `false` the result is `module.exports = ...`.
* By default depends on used webpack version. `true` for Webpack >= 2, `false` otherwise.
* @type {boolean}
* @autoconfigured
*/
esModule: true,
/**
* Turns loader in extract mode.
* Enables automatically if SVG image was imported from css/scss/sass/less/styl/html.
* @type {boolean}
* @autoconfigured
*/
extract: false,
/**
* Filename for generated sprite. `[chunkname]` placeholder can be used.
* @type {string}
*/
spriteFilename: 'sprite.svg'
}
};

View file

@ -0,0 +1,47 @@
const merge = require('deepmerge');
const defaults = require('./config');
const utils = require('./utils');
const loaderDefaults = defaults.loader;
const isomorphicSpriteModule = require.resolve('../runtime/sprite.build');
const isomorphicSymbolModule = require.resolve('svg-baker-runtime/symbol');
const isTargetBrowser = target => target === 'web' || target === 'electron-renderer'
|| target === 'node-webkit' || target === 'nwjs';
/**
* @param {Object} params
* @param {Object} [params.config] Parsed loader config {@see SVGSpriteLoaderConfig}
* @param {LoaderContext} context Loader context {@see https://webpack.js.org/api/loaders/#the-loader-context}
* @return {Object}
*/
module.exports = function configurator({ config, context, target }) {
const module = context._module;
const compiler = context._compiler;
const compilerName = compiler.name;
const autoConfigured = {
spriteModule: isTargetBrowser(target) ? loaderDefaults.spriteModule : isomorphicSpriteModule,
symbolModule: isTargetBrowser(target) ? loaderDefaults.symbolModule : isomorphicSymbolModule,
extract: utils.isModuleShouldBeExtracted(module),
esModule: context.version && context.version >= 2
};
const finalConfig = merge.all([loaderDefaults, autoConfigured, config || {}]);
/**
* esModule should be `false` when compiles via extract-text-webpack-plugin or html-webpack-plugin.
* Because this compilers executes module as usual node module so export should be always in commonjs style.
* This could be dropped when Node.js will support ES modules natively :)
* @see https://git.io/vS7Sn
* @see https://git.io/v9w60
*/
if (compilerName && (
compilerName.includes('extract-text-webpack-plugin') ||
compilerName.includes('html-webpack-plugin')
)) {
finalConfig.esModule = false;
}
return finalConfig;
};

View file

@ -0,0 +1,42 @@
const { PACKAGE_NAME } = require('./config');
class LoaderException extends Error {
constructor(message = '') {
super(`${PACKAGE_NAME} exception. ${message}`);
this.name = this.constructor.name;
/* istanbul ignore else */
if (typeof Error.captureStackTrace === 'function') {
Error.captureStackTrace(this, this.constructor);
} else {
this.stack = (new Error(message)).stack;
}
}
}
class InvalidSvg extends LoaderException {
constructor(content) {
super(`\n\n${content}`);
}
}
class ExtractPluginMissingException extends LoaderException {
constructor() {
super(`${PACKAGE_NAME} in extract mode requires the corresponding plugin`);
}
}
class InvalidRuntimeException extends LoaderException {}
class RemainingLoadersInExtractModeException extends LoaderException {
constructor() {
super(`Some loaders will be applied after ${PACKAGE_NAME} in extract mode`);
}
}
exports.LoaderException = LoaderException;
exports.InvalidSvg = InvalidSvg;
exports.ExtractPluginMissingException = ExtractPluginMissingException;
exports.InvalidRuntimeException = InvalidRuntimeException;
exports.RemainingLoadersInExtractModeException = RemainingLoadersInExtractModeException;

View file

@ -0,0 +1,82 @@
const { interpolateName, getOptions } = require('loader-utils');
const urlSlug = require('url-slug');
const SVGCompiler = require('svg-baker');
const { NAMESPACE } = require('./config');
const configure = require('./configurator');
const Exceptions = require('./exceptions');
let svgCompiler = new SVGCompiler();
// eslint-disable-next-line consistent-return
module.exports = function loader(content) {
if (this.cacheable) {
this.cacheable();
}
const done = this.async();
const loaderContext = this;
const { resourcePath, loaderIndex } = loaderContext;
// webpack 1 compat
const resourceQuery = loaderContext.resourceQuery || '';
const compiler = loaderContext._compiler;
const isChildCompiler = compiler.isChild();
const parentCompiler = isChildCompiler ? compiler.parentCompilation.compiler : null;
const matchedRules = getOptions(loaderContext);
if (!content.includes('<svg')) {
throw new Exceptions.InvalidSvg(content, matchedRules);
}
const configObj = { context: loaderContext };
configObj.config = matchedRules;
configObj.target = loaderContext.target;
/**
* @type {SVGSpriteLoaderConfig}
*/
const config = configure(configObj);
if (config.extract) {
const plugin = parentCompiler
? parentCompiler.options.plugins.find(p => p.NAMESPACE && p.NAMESPACE === NAMESPACE)
: this[NAMESPACE];
if (typeof plugin === 'undefined') {
throw new Exceptions.ExtractPluginMissingException();
}
if (loaderIndex > 0) {
this.emitWarning(new Exceptions.RemainingLoadersInExtractModeException());
}
svgCompiler = plugin.svgCompiler;
}
let runtimeGenerator;
try {
runtimeGenerator = require(config.runtimeGenerator); // eslint-disable-line import/no-dynamic-require,global-require
} catch (e) {
throw new Exceptions.InvalidRuntimeException(e.message);
}
let id;
if (typeof config.symbolId === 'function') {
id = config.symbolId(resourcePath, resourceQuery);
} else {
const idPattern = config.symbolId + (resourceQuery ? `--${urlSlug(resourceQuery)}` : '');
id = interpolateName(loaderContext, idPattern, {
content,
context: compiler.context,
regExp: config.symbolRegExp
});
}
svgCompiler.addSymbol({ id, content, path: resourcePath + resourceQuery })
.then((symbol) => {
const runtime = runtimeGenerator({ symbol, config, context: loaderContext.context, loaderContext });
done(null, runtime);
}).catch(done);
};
module.exports.NAMESPACE = NAMESPACE;

223
assets_old/node_modules/svg-sprite-loader/lib/plugin.js generated vendored Normal file
View file

@ -0,0 +1,223 @@
/* eslint-disable import/no-extraneous-dependencies */
const merge = require('deepmerge');
const Promise = require('bluebird');
const SVGCompiler = require('svg-baker');
const spriteFactory = require('svg-baker/lib/sprite-factory');
const Sprite = require('svg-baker/lib/sprite');
const { NAMESPACE } = require('./config');
const {
MappedList,
replaceInModuleSource,
replaceSpritePlaceholder,
getMatchedRule
} = require('./utils');
const defaultConfig = {
plainSprite: false,
spriteAttrs: {}
};
class SVGSpritePlugin {
constructor(cfg = {}) {
const config = merge.all([defaultConfig, cfg]);
this.config = config;
const spriteFactoryOptions = {
attrs: config.spriteAttrs
};
if (config.plainSprite) {
spriteFactoryOptions.styles = false;
spriteFactoryOptions.usages = false;
}
this.factory = ({ symbols }) => {
const opts = merge.all([spriteFactoryOptions, { symbols }]);
return spriteFactory(opts);
};
this.svgCompiler = new SVGCompiler();
this.rules = {};
}
/**
* This need to find plugin from loader context
*/
// eslint-disable-next-line class-methods-use-this
get NAMESPACE() {
return NAMESPACE;
}
getReplacements() {
const isPlainSprite = this.config.plainSprite === true;
const replacements = this.map.groupItemsBySymbolFile((acc, item) => {
acc[item.resource] = isPlainSprite ? item.url : item.useUrl;
});
return replacements;
}
// TODO optimize MappedList instantiation in each hook
apply(compiler) {
this.rules = getMatchedRule(compiler);
const path = this.rules.outputPath ? this.rules.outputPath : this.rules.publicPath;
this.filenamePrefix = path
? path.replace(/^\//, '')
: '';
if (compiler.hooks) {
compiler.hooks
.thisCompilation
.tap(NAMESPACE, (compilation) => {
compilation.hooks
.normalModuleLoader
.tap(NAMESPACE, loaderContext => loaderContext[NAMESPACE] = this);
compilation.hooks
.afterOptimizeChunks
.tap(NAMESPACE, () => this.afterOptimizeChunks(compilation));
if (compilation.hooks.optimizeExtractedChunks) {
compilation.hooks
.optimizeExtractedChunks
.tap(NAMESPACE, chunks => this.optimizeExtractedChunks(chunks));
}
compilation.hooks
.additionalAssets
.tapPromise(NAMESPACE, () => {
return this.additionalAssets(compilation);
});
});
compiler.hooks
.compilation
.tap(NAMESPACE, (compilation) => {
if (compilation.hooks.htmlWebpackPluginBeforeHtmlGeneration) {
compilation.hooks
.htmlWebpackPluginBeforeHtmlGeneration
.tapAsync(NAMESPACE, (htmlPluginData, callback) => {
htmlPluginData.assets.sprites = this.beforeHtmlGeneration(compilation);
callback(null, htmlPluginData);
});
}
if (compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing) {
compilation.hooks
.htmlWebpackPluginBeforeHtmlProcessing
.tapAsync(NAMESPACE, (htmlPluginData, callback) => {
htmlPluginData.html = this.beforeHtmlProcessing(htmlPluginData);
callback(null, htmlPluginData);
});
}
});
} else {
// Handle only main compilation
compiler.plugin('this-compilation', (compilation) => {
// Share svgCompiler with loader
compilation.plugin('normal-module-loader', (loaderContext) => {
loaderContext[NAMESPACE] = this;
});
// Replace placeholders with real URL to symbol (in modules processed by svg-sprite-loader)
compilation.plugin('after-optimize-chunks', () => this.afterOptimizeChunks(compilation));
// Hook into extract-text-webpack-plugin to replace placeholders with real URL to symbol
compilation.plugin('optimize-extracted-chunks', chunks => this.optimizeExtractedChunks(chunks));
// Hook into html-webpack-plugin to add `sprites` variable into template context
compilation.plugin('html-webpack-plugin-before-html-generation', (htmlPluginData, done) => {
htmlPluginData.assets.sprites = this.beforeHtmlGeneration(compilation);
done(null, htmlPluginData);
});
// Hook into html-webpack-plugin to replace placeholders with real URL to symbol
compilation.plugin('html-webpack-plugin-before-html-processing', (htmlPluginData, done) => {
htmlPluginData.html = this.beforeHtmlProcessing(htmlPluginData);
done(null, htmlPluginData);
});
// Create sprite chunk
compilation.plugin('additional-assets', (done) => {
return this.additionalAssets(compilation)
.then(() => {
done();
return true;
})
.catch(e => done(e));
});
});
}
}
additionalAssets(compilation) {
const itemsBySprite = this.map.groupItemsBySpriteFilename();
const filenames = Object.keys(itemsBySprite);
return Promise.map(filenames, (filename) => {
const spriteSymbols = itemsBySprite[filename].map(item => item.symbol);
return Sprite.create({
symbols: spriteSymbols,
factory: this.factory
})
.then((sprite) => {
const content = sprite.render();
compilation.assets[`${this.filenamePrefix}${filename}`] = {
source() { return content; },
size() { return content.length; },
updateHash(bulkUpdateDecorator) { bulkUpdateDecorator.update(content); }
};
});
});
}
afterOptimizeChunks(compilation) {
const { symbols } = this.svgCompiler;
this.map = new MappedList(symbols, compilation);
const replacements = this.getReplacements();
this.map.items.forEach(item => replaceInModuleSource(item.module, replacements));
}
optimizeExtractedChunks(chunks) {
const replacements = this.getReplacements();
chunks.forEach((chunk) => {
let modules;
if (chunk.modulesIterable) {
modules = Array.from(chunk.modulesIterable);
} else {
modules = chunk.modules;
}
modules
// dirty hack to identify modules extracted by extract-text-webpack-plugin
// TODO refactor
.filter(module => '_originalModule' in module)
.forEach(module => replaceInModuleSource(module, replacements));
});
}
beforeHtmlGeneration(compilation) {
const itemsBySprite = this.map.groupItemsBySpriteFilename();
const sprites = Object.keys(itemsBySprite).reduce((acc, filename) => {
acc[this.filenamePrefix + filename] = compilation.assets[this.filenamePrefix + filename].source();
return acc;
}, {});
return sprites;
}
beforeHtmlProcessing(htmlPluginData) {
const replacements = this.getReplacements();
return replaceSpritePlaceholder(htmlPluginData.html, replacements);
}
}
module.exports = SVGSpritePlugin;

View file

@ -0,0 +1,57 @@
const { isAbsolute, join } = require('path');
const { stringifyRequest } = require('loader-utils');
const {
stringify,
stringifySymbol,
generateImport,
generateExport,
generateSpritePlaceholder
} = require('./utils');
/**
* @param {Object} params
* @param {SpriteSymbol} params.symbol - Sprite symbol instance {@see https://git.io/v9k8g}
* @param {SVGSpriteLoaderConfig} params.config - Parsed loader config
* @param {string} params.context - Context folder of current processing module
* @param {Object} params.loaderContext {@see https://webpack.js.org/api/loaders/#the-loader-context}
* @return {string}
*/
function runtimeGenerator(params) {
const { symbol, config, context, loaderContext } = params;
const { extract, esModule, spriteModule, symbolModule, runtimeCompat, publicPath } = config;
let runtime;
if (extract) {
const spritePlaceholder = generateSpritePlaceholder(symbol.request.file);
const path = stringify(publicPath) || '__webpack_public_path__';
const data = `{
id: ${stringify(symbol.useId)},
viewBox: ${stringify(symbol.viewBox)},
url: ${path} + ${stringify(spritePlaceholder)},
toString: function () {
return this.url;
}
}`;
runtime = generateExport(data, esModule);
} else {
const spriteModuleAbsPath = isAbsolute(spriteModule) ? spriteModule : join(context, spriteModule);
const symbolModuleAbsPath = isAbsolute(symbolModule) ? symbolModule : join(context, symbolModule);
const spriteModuleImport = stringifyRequest(loaderContext, spriteModuleAbsPath);
const symbolModuleImport = stringifyRequest(loaderContext, symbolModuleAbsPath);
runtime = [
generateImport('SpriteSymbol', symbolModuleImport, esModule),
generateImport('sprite', spriteModuleImport, esModule),
`var symbol = new SpriteSymbol(${stringifySymbol(symbol)})`,
'var result = sprite.add(symbol)',
generateExport(runtimeCompat ? '"#" + symbol.id' : 'symbol', esModule)
].join(';\n');
}
return runtime;
}
module.exports = runtimeGenerator;

View file

@ -0,0 +1,14 @@
const loaderDefaults = require('../config').loader;
/**
* @param {string} content
* @param {boolean} [esModule=false]
* @return {string}
*/
function generateExport(content, esModule = loaderDefaults.esModule) {
return esModule ?
`export default ${content}` :
`module.exports = ${content}`;
}
module.exports = generateExport;

View file

@ -0,0 +1,16 @@
const loaderDefaults = require('../config').loader;
const stringify = require('./stringify');
/**
* @param {string} symbol - Symbol name
* @param {string} module - Module name
* @param {boolean} esModule
* @return {string}
*/
function generateImport(symbol, module, esModule = loaderDefaults.esModule) {
return esModule ?
`import ${symbol} from ${stringify(module)}` :
`var ${symbol} = require(${stringify(module)})`;
}
module.exports = generateImport;

View file

@ -0,0 +1,10 @@
/**
* Because of extract-text-webpack-plugin interop returns just absolute path to filepath
* @param {string} filepath
* @return {string}
*/
function generateSpritePlaceholder(filepath) {
return filepath;
}
module.exports = generateSpritePlaceholder;

View file

@ -0,0 +1,50 @@
let ConcatenatedModule;
try {
// eslint-disable-next-line global-require,import/no-unresolved,import/no-extraneous-dependencies
ConcatenatedModule = require('webpack/lib/optimize/ConcatenatedModule');
// eslint-disable-next-line no-empty
} catch (e) {}
/**
* Get all modules from main & child compilations.
* Merge modules from ConcatenatedModule (when webpack.optimize.ModuleConcatenationPlugin is used)
* @param {Compilation} compilation
* @return {NormalModule[]}
*/
function getAllModules(compilation) {
let modules = Array.from(compilation.modules);
// Look up in child compilations
if (compilation.children.length > 0) {
const childModules = compilation.children.map(getAllModules)
.reduce((acc, compilationModules) => acc.concat(compilationModules), []);
modules = modules.concat(childModules);
}
// Merge modules from ConcatenatedModule
if (ConcatenatedModule) {
const concatenatedModules = modules
.filter(m => m instanceof ConcatenatedModule)
.reduce((acc, m) => {
/**
* @see https://git.io/v7XDu
* In webpack@3.5.1 `modules` public property was removed
* To workaround this private `_orderedConcatenationList` property is used to collect modules
*/
const subModules = 'modules' in m
? m.modules
: m._orderedConcatenationList.map(entry => entry.module);
return acc.concat(subModules);
}, []);
if (concatenatedModules.length > 0) {
modules = modules.concat(concatenatedModules);
}
}
return modules;
}
module.exports = getAllModules;

View file

@ -0,0 +1,34 @@
const normalizeRule = require('./normalize-rule');
const isWebpack1 = require('./is-webpack-1');
/**
* webpack 1 compat loader options finder. Returns normalized options.
* @param {string} loaderPath
* @param {Object|Rule} rule
* @return {Object|null}
*/
function getLoaderOptions(loaderPath, rule) {
let multiRuleProp;
if (isWebpack1) {
multiRuleProp = 'loaders';
} else if (rule.oneOf) {
multiRuleProp = 'oneOf';
} else {
multiRuleProp = 'use';
}
const multiRule = typeof rule === 'object' && Array.isArray(rule[multiRuleProp]) ? rule[multiRuleProp] : null;
let options;
if (multiRule) {
const rules = [].concat(...multiRule.map(r => (r.use || r)));
options = rules.map(normalizeRule).find(r => loaderPath.includes(r.loader)).options;
} else {
options = normalizeRule(rule).options;
}
return options;
}
module.exports = getLoaderOptions;

View file

@ -0,0 +1,22 @@
/* eslint-disable import/no-unresolved */
// eslint-disable-next-line import/no-extraneous-dependencies
const RuleSet = require('webpack/lib/RuleSet');
const flattenAndExtractUse = rules => rules.reduce((pre, rule) => {
if ('rules' in rule || 'oneOf' in rule) {
return pre.concat(flattenAndExtractUse(rule.rules || rule.oneOf));
}
return pre.concat(rule.use || []);
}, []);
module.exports = (compiler) => {
const rawRules = compiler.options.module.rules;
const { rules } = new RuleSet(rawRules);
const rule = flattenAndExtractUse(rules)
.find((item) => {
return /svg-sprite-loader/.test(item.loader);
}) || {};
return rule.options || {};
};

View file

@ -0,0 +1,60 @@
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable import/no-unresolved */
/* eslint-disable no-restricted-syntax */
// eslint-disable-next-line import/no-extraneous-dependencies
const BasicEffectRulePlugin = require('webpack/lib/rules/BasicEffectRulePlugin');
const BasicMatcherRulePlugin = require('webpack/lib/rules/BasicMatcherRulePlugin');
const RuleSetCompiler = require('webpack/lib/rules/RuleSetCompiler');
const UseEffectRulePlugin = require('webpack/lib/rules/UseEffectRulePlugin');
const ruleSetCompiler = new RuleSetCompiler([
new BasicMatcherRulePlugin('test', 'resource'),
new BasicMatcherRulePlugin('include', 'resource'),
new BasicMatcherRulePlugin('exclude', 'resource', true),
new BasicMatcherRulePlugin('resource'),
new BasicMatcherRulePlugin('conditions'),
new BasicMatcherRulePlugin('resourceQuery'),
new BasicMatcherRulePlugin('realResource'),
new BasicMatcherRulePlugin('issuer'),
new BasicMatcherRulePlugin('compiler'),
new BasicEffectRulePlugin('type'),
new BasicEffectRulePlugin('sideEffects'),
new BasicEffectRulePlugin('parser'),
new BasicEffectRulePlugin('resolve'),
new UseEffectRulePlugin()
]);
// const RuleSet = require('webpack/lib/RuleSet');
const flattenAndExtractUse = rules => rules.reduce((pre, rule) => {
// if ('rules' in rule || 'oneOf' in rule) {
// return pre.concat(flattenAndExtractUse(rule.rules || rule.oneOf));
// }
return pre.concat(rule || []);
}, []);
module.exports = (compiler) => {
const rawRules = compiler.options.module.rules;
const rulesUse = [];
for (const rawRule of rawRules) {
const clonedRawRule = Object.assign({}, rawRule);
delete clonedRawRule.include;
const ruleSet = ruleSetCompiler.compile([{
rules: [clonedRawRule]
}]);
rulesUse.push(ruleSet.exec({
resource: '.svg'
}));
}
// const {
// rules
// } = ruleSet;
const rule = flattenAndExtractUse(rulesUse)
.find((item) => {
return /svg-sprite-loader/.test(item.value.loader);
}) || {};
return rule.value ? rule.value.options : {};
};

View file

@ -0,0 +1,11 @@
/* eslint-disable global-require */
let getMatchedRule = null;
try {
getMatchedRule = require('./get-matched-rule-4');
} catch (e) {
getMatchedRule = require('./get-matched-rule-5');
}
module.exports = getMatchedRule;

View file

@ -0,0 +1,33 @@
/**
* Find nearest module chunk (not sure that is reliable method, but who cares).
* @see http://stackoverflow.com/questions/43202761/how-to-determine-all-module-chunks-in-webpack
* @param {NormalModule} module
* @param {NormalModule[]} modules - webpack 1 compat
* @return {Chunk|null}
*/
function getModuleChunk(module, modules) {
let chunks;
if (module.chunksIterable) {
chunks = Array.from(module.chunksIterable);
} else if (module.mapChunks) {
chunks = module.mapChunks();
} else {
chunks = module.chunks;
}
// webpack 1 compat
const issuer = typeof module.issuer === 'string'
? modules.find(m => m.request === module.issuer)
: module.issuer;
if (Array.isArray(chunks) && chunks.length > 0) {
return chunks[chunks.length - 1];
} else if (issuer) {
return getModuleChunk(issuer, modules);
}
return null;
}
module.exports = getModuleChunk;

View file

@ -0,0 +1,16 @@
module.exports.generateExport = require('./generate-export');
module.exports.generateImport = require('./generate-import');
module.exports.generateSpritePlaceholder = require('./generate-sprite-placeholder');
module.exports.getAllModules = require('./get-all-modules');
// module.exports.getLoaderOptions = require('./get-loader-options');
module.exports.getModuleChunk = require('./get-module-chunk');
module.exports.getMatchedRule = require('./get-matched-rule');
module.exports.isModuleShouldBeExtracted = require('./is-module-should-be-extracted');
module.exports.interpolate = require('./interpolate');
module.exports.isWebpack1 = require('./is-webpack-1');
module.exports.MappedList = require('./mapped-list');
module.exports.normalizeRule = require('./normalize-rule');
module.exports.replaceInModuleSource = require('./replace-in-module-source');
module.exports.replaceSpritePlaceholder = require('./replace-sprite-placeholder');
module.exports.stringify = require('./stringify');
module.exports.stringifySymbol = require('./stringify-symbol');

View file

@ -0,0 +1,15 @@
const { interpolateName } = require('loader-utils');
/**
* @param {string} pattern
* @param {Object} options
* @param {string} options.resourcePath
* @param {string} [options.context]
* @param {string} [options.content]
*/
function interpolate(pattern, options) {
const { resourcePath, context, content } = options;
return interpolateName({ resourcePath }, pattern, { context, content });
}
module.exports = interpolate;

View file

@ -0,0 +1,35 @@
const defaults = require('../config');
const normalizeRule = require('./normalize-rule');
const spriteLoaderPath = require.resolve('../loader');
/**
* @param {NormalModule} module
* @return {boolean}
*/
function isModuleShouldBeExtracted(module) {
const { request, issuer, loaders } = module;
let rule = null;
if (Array.isArray(loaders) && loaders.length > 0) {
// Find loader rule
rule = loaders.map(normalizeRule).find(data => data.loader === spriteLoaderPath);
}
let issuerResource = null;
if (issuer) {
// webpack 1 compat
issuerResource = typeof issuer === 'string' ? issuer : issuer.resource;
}
if (typeof request === 'string' && (!request.includes(spriteLoaderPath) || !rule)) {
return false;
}
return !!(
(issuer && defaults.EXTRACTABLE_MODULE_ISSUER_PATTERN.test(issuerResource)) ||
(rule && rule.options && rule.options.extract)
);
}
module.exports = isModuleShouldBeExtracted;

View file

@ -0,0 +1,6 @@
// eslint-disable-next-line import/no-extraneous-dependencies
const webpackPkg = require('webpack/package.json');
const webpackMajorVersion = parseInt(webpackPkg.version.split('.')[0], 10);
module.exports = webpackMajorVersion === 1;

View file

@ -0,0 +1,147 @@
// TODO refactor this smelly code!
const loaderDefaults = require('../config').loader;
const getAllModules = require('./get-all-modules');
const isModuleShouldBeExtracted = require('./is-module-should-be-extracted');
const getModuleChunk = require('./get-module-chunk');
const interpolate = require('./interpolate');
const getMatchedRule = require('./get-matched-rule');
class MappedListItem {
/**
* @param {SpriteSymbol} symbol
* @param {NormalModule} module
* @param {string} spriteFilename
*/
constructor(symbol, module, spriteFilename) {
this.symbol = symbol;
this.module = module;
this.resource = symbol.request.file;
this.spriteFilename = spriteFilename;
}
get url() {
return `${this.spriteFilename}#${this.symbol.id}`;
}
get useUrl() {
return `${this.spriteFilename}#${this.symbol.useId}`;
}
}
class MappedList {
/**
* @param {SpriteSymbol[]} symbols
* @param {Compilation} compilation
*/
constructor(symbols, compilation, shouldLog = false) {
const { compiler } = compilation;
this.symbols = symbols;
this.rule = getMatchedRule(compiler);
this.allModules = getAllModules(compilation);
this.spriteModules = this.allModules.filter(isModuleShouldBeExtracted);
this.shouldLog = shouldLog;
this.items = this.create();
}
/**
* @param {MappedListItem[]} data
* @return {Object<string, MappedListItem>}
*/
static groupItemsBySpriteFilename(data) {
return data
.map(item => item.spriteFilename)
.filter((value, index, self) => self.indexOf(value) === index)
.reduce((acc, spriteFilename) => {
acc[spriteFilename] = data.filter(item => item.spriteFilename === spriteFilename);
return acc;
}, {});
}
/**
* @param {MappedListItem[]} data
* @param {Function} [mapper] Custom grouper function
* @return {Object<string, MappedListItem>}
*/
static groupItemsBySymbolFile(data, mapper) {
return data.reduce((acc, item) => {
if (mapper) {
mapper(acc, item);
} else {
acc[item.resource] = item;
}
return acc;
}, {});
}
/**
* @return {MappedListItem[]}
*/
create() {
const { symbols, spriteModules, allModules, rule } = this;
const data = symbols.reduce((acc, symbol) => {
const resource = symbol.request.file;
const module = spriteModules.find((m) => {
return 'resource' in m ? m.resource.split('?')[0] === resource : false;
});
let spriteFilename = rule.spriteFilename || loaderDefaults.spriteFilename;
const chunk = module ? getModuleChunk(module, allModules) : null;
if (typeof spriteFilename !== 'function' && chunk && chunk.name) {
spriteFilename = spriteFilename.replace('[chunkname]', chunk.name);
} else if (typeof spriteFilename === 'function') {
spriteFilename = spriteFilename(resource);
}
if (rule && module) {
acc.push(new MappedListItem(symbol, module, spriteFilename));
}
return acc;
}, []);
// Additional pass to interpolate [hash] in spriteFilename
const itemsBySpriteFilename = MappedList.groupItemsBySpriteFilename(data);
const filenames = Object.keys(itemsBySpriteFilename);
filenames.forEach((filename) => {
if (!filename.includes('hash')) {
return;
}
const items = itemsBySpriteFilename[filename];
const spriteSymbols = items.map(item => item.symbol);
const content = spriteSymbols.map(s => s.render()).join('');
const interpolatedName = interpolate(filename, {
resourcePath: filename,
content
});
items
.filter(item => item.spriteFilename !== interpolatedName)
.forEach(item => item.spriteFilename = interpolatedName);
});
return data;
}
/**
* @return {Object<string, MappedListItem>}
*/
groupItemsBySpriteFilename() {
return MappedList.groupItemsBySpriteFilename(this.items);
}
/**
* @param {Function} [mapper] Custom grouper function
* @return {Object<string, MappedListItem>}
*/
groupItemsBySymbolFile(mapper) {
return MappedList.groupItemsBySymbolFile(this.items, mapper);
}
}
module.exports = MappedList;

View file

@ -0,0 +1,33 @@
const { parseQuery } = require('loader-utils');
const isWebpack1 = require('./is-webpack-1');
/**
* webpack 1 compat rule normalizer
* @param {string|Rule} rule (string - webpack 1, Object - webpack 2)
* @return {Object<loader: string, options: Object|null>}
*/
function normalizeRule(rule) {
if (!rule) {
throw new Error('Rule should be string or object');
}
let data;
if (typeof rule === 'string') {
const parts = rule.split('?');
data = {
loader: parts[0],
options: parts[1] ? parseQuery(`?${parts[1]}`) : null
};
} else {
const options = isWebpack1 ? rule.query : rule.options;
data = {
loader: rule.loader,
options: options || null
};
}
return data;
}
module.exports = normalizeRule;

View file

@ -0,0 +1,20 @@
const replaceSpritePlaceholder = require('./replace-sprite-placeholder');
/**
* @param {NormalModule|ExtractedModule} module
* @param {Object<string, string>} replacements
* @return {NormalModule|ExtractedModule}
*/
function replaceInModuleSource(module, replacements) {
const source = module._source;
if (typeof source === 'string') {
module._source = replaceSpritePlaceholder(source, replacements);
} else if (typeof source === 'object' && typeof source._value === 'string') {
source._value = replaceSpritePlaceholder(source._value, replacements);
}
return module;
}
module.exports = replaceInModuleSource;

View file

@ -0,0 +1,26 @@
const escapeRegExpSpecialChars = require('escape-string-regexp');
const isWindows = /^win/i.test(process.platform);
/**
* @param {string} content
* @param {Object<string, string>} replacements
* @return {string}
*/
function replaceSpritePlaceholder(content, replacements) {
let result = content;
Object.keys(replacements)
.forEach((subj) => {
let re = new RegExp(escapeRegExpSpecialChars(subj), 'g');
result = result.replace(re, replacements[subj]);
if (isWindows) {
re = new RegExp(escapeRegExpSpecialChars(subj), 'g');
result = result.replace(/\\\\/g, '\\').replace(re, replacements[subj]);
}
});
return result;
}
module.exports = replaceSpritePlaceholder;

View file

@ -0,0 +1,16 @@
const stringify = require('./stringify');
/**
* @param {SpriteSymbol} symbol
* @return {string}
*/
function stringifySymbol(symbol) {
return stringify({
id: symbol.id,
use: symbol.useId,
viewBox: symbol.viewBox,
content: symbol.render()
});
}
module.exports = stringifySymbol;

View file

@ -0,0 +1,15 @@
const stringifiedRegexp = /^'|".*'|"$/;
/**
* If already stringified - return original content
* @param {Object|Array} content
* @return {string}
*/
function stringify(content) {
if (typeof content === 'string' && stringifiedRegexp.test(content)) {
return content;
}
return JSON.stringify(content, null, 2);
}
module.exports = stringify;

108
assets_old/node_modules/svg-sprite-loader/package.json generated vendored Normal file
View file

@ -0,0 +1,108 @@
{
"name": "svg-sprite-loader",
"version": "6.0.2",
"description": "Webpack loader for creating SVG sprites",
"keywords": [
"svg",
"sprite",
"svg sprite",
"svg stack",
"webpack",
"webpack2",
"webpack3",
"webpack loader",
"webpack plugin"
],
"homepage": "https://github.com/JetBrains/svg-sprite-loader#readme",
"bugs": "https://github.com/JetBrains/svg-sprite-loader/issues",
"license": "MIT",
"author": "kisenka",
"repository": "JetBrains/svg-sprite-loader",
"main": "lib/loader.js",
"files": [
"examples/**",
"lib/**",
"runtime/*.js",
"plugin.js",
"README.md",
"LICENSE"
],
"engines": {
"node": ">=6"
},
"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.5.0",
"svg-baker-runtime": "^1.4.7",
"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.1",
"codeclimate-test-reporter": "0.4.1",
"commitizen": "2.9.6",
"css-loader": "^0.28.0",
"cz-customizable": "^5.0.0",
"eslint-config-airbnb-base": "^11.1.2",
"eslint-plugin-import": "^2.2.0",
"glob": "7.1.1",
"husky": "^0.13.3",
"istanbul": "^0.4.5",
"memory-fs": "^0.4.1",
"minimist": "^1.2.0",
"mocha": "^7.0.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": "^3.9.15",
"webpack-cli": "^3.3.10",
"webpack-toolkit": "^1.0.0"
},
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"
},
"cz-customizable": {
"config": ".cz-config.js"
}
},
"scripts": {
"bootstrap": "node scripts/bootstrap",
"build:examples": "yarn env webpack-3 && yarn 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": "node scripts/select-env",
"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": "mocha test/*.test.js",
"test:all": "yarn test:webpack-2 && yarn test:webpack-3 && yarn test:webpack-4",
"test:webpack-2": "yarn env webpack-2 && env WEBPACK_VERSION=2 yarn test",
"test:webpack-3": "yarn env webpack-3 && env WEBPACK_VERSION=3 yarn test",
"test:webpack-4": "yarn env webpack-4 && env WEBPACK_VERSION=4 yarn test",
"upload-coverage": "codeclimate-test-reporter < coverage/lcov.info"
}
}

1
assets_old/node_modules/svg-sprite-loader/plugin.js generated vendored Normal file
View file

@ -0,0 +1 @@
module.exports = require('./lib/plugin');

Some files were not shown because too many files have changed in this diff Show more