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,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)
@@ -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>
@@ -0,0 +1 @@
+import symbol from '../assets/twitter.svg';
@@ -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'
+        ]
+      }
+    ]
+  }
+});
				`@@ -0,0 +1 @@`
				`import symbol from '../assets/twitter.svg';`