Merge remote-tracking branch 'upstream/main'

2026-08-26 09:31:34 +08:00
parent 9b8c4bfab6
commit 394eb0285d
34137 changed files with 3589424 additions and 0 deletions
@@ -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)
@@ -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>
@@ -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'
+};
@@ -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')
+  );
+});
@@ -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} />;
+      }
+    }
+  `;
+};
@@ -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;