bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Webpack: serve SVG icons as files

Browse source
This commit is contained in:
Alex Gleason 2021-09-26 20:00:16 -05:00
parent 80d75d5a80
commit 58adc67e4b
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
4 changed files with 9 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -103,7 +103,6 @@
"mark-loader": "^0.1.6", "mark-loader": "^0.1.6",
"marky": "^1.2.1", "marky": "^1.2.1",
"mini-css-extract-plugin": "^1.6.2", "mini-css-extract-plugin": "^1.6.2",
"mini-svg-data-uri": "^1.3.3",
"object-assign": "^4.1.1", "object-assign": "^4.1.1",
"object-fit-images": "^3.2.3", "object-fit-images": "^3.2.3",
"object.values": "^1.1.0", "object.values": "^1.1.0",

1
webpack/production.js
View file

@ -32,6 +32,7 @@ module.exports = merge(sharedConfig, {
additional: [ additional: [
':externals:', ':externals:',
'packs/images/32-*.png', // used in emoji-mart 'packs/images/32-*.png', // used in emoji-mart
'packs/icons/*.svg',
], ],
optional: [ optional: [
'**/locale_*.js', // don't fetch every locale; the user only needs one '**/locale_*.js', // don't fetch every locale; the user only needs one

17
webpack/rules/assets.js
View file

@ -2,7 +2,6 @@
// https://webpack.js.org/guides/asset-modules/ // https://webpack.js.org/guides/asset-modules/
const { resolve } = require('path'); const { resolve } = require('path');
const svgToMiniDataURI = require('mini-svg-data-uri');
// These are processed in reverse-order // These are processed in reverse-order
// We use the name 'packs' instead of 'assets' for legacy reasons // We use the name 'packs' instead of 'assets' for legacy reasons
@ -43,32 +42,32 @@ module.exports = [{
}, },
}, { }, {
test: /\.svg$/, test: /\.svg$/,
type: 'asset/inline', type: 'asset/resource',
include: resolve('app', 'icons'), include: resolve('app', 'icons'),
generator: { generator: {
dataUrl: content => svgToMiniDataURI(content.toString()), filename: 'packs/icons/[name]-[contenthash:8][ext]',
}, },
}, { }, {
test: /\.svg$/, test: /\.svg$/,
type: 'asset/inline', type: 'asset/resource',
include: resolve('node_modules', 'bootstrap-icons'), include: resolve('node_modules', 'bootstrap-icons'),
generator: { generator: {
dataUrl: content => svgToMiniDataURI(content.toString()), filename: 'packs/icons/[name]-[contenthash:8][ext]',
}, },
}, { }, {
test: /\.svg$/, test: /\.svg$/,
type: 'asset/inline', type: 'asset/resource',
include: resolve('node_modules', 'feather-icons'), include: resolve('node_modules', 'feather-icons'),
generator: { generator: {
dataUrl: content => svgToMiniDataURI(content.toString()), filename: 'packs/icons/[name]-[contenthash:8][ext]',
}, },
}, { }, {
test: /\.svg$/, test: /\.svg$/,
type: 'asset/inline', type: 'asset/resource',
include: resolve('node_modules', '@tabler'), include: resolve('node_modules', '@tabler'),
generator: { generator: {
dataUrl: content => svgToMiniDataURI(content.toString()), filename: 'packs/icons/[name]-[contenthash:8][ext]',
}, },
}, { }, {
test: /\.svg$/, test: /\.svg$/,

5
yarn.lock
View file

@ -6511,11 +6511,6 @@ mini-css-extract-plugin@^1.6.2:
schema-utils "^3.0.0" schema-utils "^3.0.0"
webpack-sources "^1.1.0" webpack-sources "^1.1.0"
mini-svg-data-uri@^1.3.3:
version "1.3.3"
resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.3.3.tgz#91d2c09f45e056e5e1043340b8b37ba7b50f4fac"
integrity sha512-+fA2oRcR1dJI/7ITmeQJDrYWks0wodlOz0pAEhKYJ2IVc1z0AnwJUsKY2fzFmPAM3Jo9J0rBx8JAA9QQSJ5PuA==
minimalistic-assert@^1.0.0: minimalistic-assert@^1.0.0:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7" resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"