progress on migrating to heex templates and font-icons

This commit is contained in:
Adam Piontek 2022-08-13 07:32:36 -04:00
commit 3eff955672
21793 changed files with 2161968 additions and 16895 deletions

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'
}
]
}
});