zhaichao/education
1
0
Fork 0
forked from liweijie/education
Code Pull Requests Activity

Merge remote-tracking branch 'upstream/main'

Browse Source
This commit is contained in:
zhaichao
2026-08-26 09:31:34 +08:00
parent 9b8c4bfab6
commit 394eb0285d
34137 changed files with 3589424 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/node_modules/svg-sprite-loader/examples/extract-mode/README.md
Generated Vendored
+55
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)
frontend/node_modules/svg-sprite-loader/examples/extract-mode/build/main.css
Generated Vendored
+6
View File
@@ -0,0 +1,6 @@
.twitter-logo {
width: 200px;
height: 200px;
background: url(sprite-de3584.svg#twitter-usage) no-repeat;
background-size: contain;
}
frontend/node_modules/svg-sprite-loader/examples/extract-mode/build/main.html
Generated Vendored
+15
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>
frontend/node_modules/svg-sprite-loader/examples/extract-mode/build/main.js
Generated Vendored
+111
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
/***/ })
/******/ ]);
frontend/node_modules/svg-sprite-loader/examples/extract-mode/build/sprite-10a171.svg
Generated Vendored
+13
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>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

frontend/node_modules/svg-sprite-loader/examples/extract-mode/build/sprite-de3584.svg
Generated Vendored
+10
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>
Side by Side

After

Width:  |  Height:  |  Size: 912 B

frontend/node_modules/svg-sprite-loader/examples/extract-mode/main.css
Generated Vendored
+6
View File
@@ -0,0 +1,6 @@
.twitter-logo {
width: 200px;
height: 200px;
background: url('../assets/twitter.svg') no-repeat;
background-size: contain;
}
frontend/node_modules/svg-sprite-loader/examples/extract-mode/main.html
Generated Vendored
+15
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>
frontend/node_modules/svg-sprite-loader/examples/extract-mode/main.js
Generated Vendored
+4
View File
@@ -0,0 +1,4 @@
import '../assets/twitter.svg';
import './main.css';
import './main.html';
frontend/node_modules/svg-sprite-loader/examples/extract-mode/webpack.config.js
Generated Vendored
+48
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;