Direct SVG rendering (#12157)

Introduce 'make svg' which calls a node script that compiles svg files
to `public/img/svg`. These files are vendored to not create a dependency
on Node for the backend build.

On the frontend side, configure webpack using `raw-loader` so SVGs can
be imported as string.

Also moved our existing SVGs to web_src/svg for consistency.

Fixes: https://github.com/go-gitea/gitea/issues/11618

1 files changed, 5 insertions, 26 deletions

diff --git a/webpack.config.js b/webpack.config.js
index 40a184eb4..637ff5d94 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,7 +5,6 @@ const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const PostCSSPresetEnv = require('postcss-preset-env');
-const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const {statSync} = require('fs');
@@ -28,7 +27,7 @@ const filterCssImport = (parsedImport, cssFile) => {
 
   if (cssFile.includes('fomantic')) {
     if (/brand-icons/.test(importedFile)) return false;
-    if (/(eot|ttf|otf|woff)$/.test(importedFile)) return false;
+    if (/(eot|ttf|otf|woff|svg)$/.test(importedFile)) return false;
   }
 
   if (cssFile.includes('font-awesome')) {
@@ -57,10 +56,6 @@ module.exports = {
     'eventsource.sharedworker': [
       resolve(__dirname, 'web_src/js/features/eventsource.sharedworker.js'),
     ],
-    icons: [
-      ...glob('node_modules/@primer/octicons/build/svg/**/*.svg'),
-      ...glob('assets/svg/*.svg'),
-    ],
     ...themes,
   },
   devtool: false,
@@ -233,23 +228,10 @@ module.exports = {
       },
       {
         test: /\.svg$/,
+        include: resolve(__dirname, 'public/img/svg'),
         use: [
           {
-            loader: 'svg-sprite-loader',
-            options: {
-              extract: true,
-              spriteFilename: 'img/svg/icons.svg',
-              symbolId: (path) => {
-                const {name} = parse(path);
-                if (/@primer[/\\]octicons/.test(path)) {
-                  return `octicon-${name}`;
-                }
-                return name;
-              },
-            },
-          },
-          {
-            loader: 'svgo-loader',
+            loader: 'raw-loader',
           },
         ],
       },
@@ -270,9 +252,9 @@ module.exports = {
   },
   plugins: [
     new VueLoaderPlugin(),
-    // avoid generating useless js output files for css- and svg-only chunks
+    // avoid generating useless js output files for css--only chunks
     new FixStyleOnlyEntriesPlugin({
-      extensions: ['less', 'scss', 'css', 'svg'],
+      extensions: ['less', 'scss', 'css'],
       silent: true,
     }),
     new MiniCssExtractPlugin({
@@ -286,9 +268,6 @@ module.exports = {
         'css/index.css',
       ],
     }),
-    new SpriteLoaderPlugin({
-      plainSprite: true,
-    }),
     new MonacoWebpackPlugin({
       filename: 'js/monaco-[name].worker.js',
     }),