mirror of https://github.com/vector-im/riot-web
add svgr loader for icons (#21248)
* add svgr loader for icons Signed-off-by: Kerry Archibald <kerrya@element.io> * fix config, move dep to dev Signed-off-by: Kerry Archibald <kerrya@element.io> * add svg types Signed-off-by: Kerry Archibald <kerrya@element.io> * add aria-hidden and role=img to svg Signed-off-by: Kerry Archibald <kerrya@element.io> * make svgProps explicitly overridable Signed-off-by: Kerry Archibald <kerrya@element.io> * role presentatino Signed-off-by: Kerry Archibald <kerrya@element.io> * update copyright Signed-off-by: Kerry Archibald <kerrya@element.io>pull/21277/head
Kerry
GitHub
parent
240c3be014
commit
9a17a61809
|
|
@ -90,6 +90,7 @@
|
|||
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
|
||||
"@principalstudio/html-webpack-inject-preload": "^1.2.7",
|
||||
"@sentry/webpack-plugin": "^1.18.1",
|
||||
"@svgr/webpack": "^5.5.0",
|
||||
"@types/flux": "^3.1.9",
|
||||
"@types/jest": "^27.0.2",
|
||||
"@types/modernizr": "^3.5.3",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
/*
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
declare module "*.svg" {
|
||||
const path: string;
|
||||
export const Icon: React.FC<React.SVGProps<SVGSVGElement>>;
|
||||
export default path;
|
||||
}
|
||||
|
|
@ -455,7 +455,52 @@ module.exports = (env, argv) => {
|
|||
},
|
||||
},
|
||||
{
|
||||
test: /\.(gif|png|svg|ttf|woff|woff2|xml|ico)$/,
|
||||
test: /\.svg$/,
|
||||
use: [
|
||||
{
|
||||
loader: '@svgr/webpack',
|
||||
options: {
|
||||
namedExport: 'Icon',
|
||||
svgProps: {
|
||||
role: 'presentation',
|
||||
'aria-hidden': true,
|
||||
},
|
||||
// props set on the svg will override defaults
|
||||
expandProps: 'end',
|
||||
svgoConfig: {
|
||||
plugins: {
|
||||
// generates a viewbox if missing
|
||||
removeDimensions: true,
|
||||
},
|
||||
},
|
||||
esModule: false,
|
||||
name: '[name].[hash:7].[ext]',
|
||||
outputPath: getAssetOutputPath,
|
||||
publicPath: function (url, resourcePath) {
|
||||
const outputPath = getAssetOutputPath(url, resourcePath);
|
||||
return toPublicPath(path.join("../..", outputPath));
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
esModule: false,
|
||||
name: '[name].[hash:7].[ext]',
|
||||
outputPath: getAssetOutputPath,
|
||||
publicPath: function (url, resourcePath) {
|
||||
// CSS image usages end up in the `bundles/[hash]` output
|
||||
// directory, so we adjust the final path to navigate up
|
||||
// twice.
|
||||
const outputPath = getAssetOutputPath(url, resourcePath);
|
||||
return toPublicPath(path.join("../..", outputPath));
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(gif|png|ttf|woff|woff2|xml|ico)$/,
|
||||
// Use a content-based hash in the name so that we can set a long cache
|
||||
// lifetime for assets while still delivering changes quickly.
|
||||
oneOf: [
|
||||
|
|
|
|||
125
yarn.lock
125
yarn.lock
|
|
@ -800,6 +800,13 @@
|
|||
dependencies:
|
||||
"@babel/helper-plugin-utils" "^7.16.7"
|
||||
|
||||
"@babel/plugin-transform-react-constant-elements@^7.12.1":
|
||||
version "7.17.6"
|
||||
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.17.6.tgz#6cc273c2f612a6a50cb657e63ee1303e5e68d10a"
|
||||
integrity sha512-OBv9VkyyKtsHZiHLoSfCn+h6yU7YKX8nrs32xUmOa1SRSk+t03FosB6fBZ0Yz4BpD1WV7l73Nsad+2Tz7APpqw==
|
||||
dependencies:
|
||||
"@babel/helper-plugin-utils" "^7.16.7"
|
||||
|
||||
"@babel/plugin-transform-react-display-name@^7.16.7":
|
||||
version "7.16.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.16.7.tgz#7b6d40d232f4c0f550ea348593db3b21e2404340"
|
||||
|
|
@ -919,7 +926,7 @@
|
|||
"@babel/helper-create-regexp-features-plugin" "^7.16.7"
|
||||
"@babel/helper-plugin-utils" "^7.16.7"
|
||||
|
||||
"@babel/preset-env@^7.12.11":
|
||||
"@babel/preset-env@^7.12.1", "@babel/preset-env@^7.12.11":
|
||||
version "7.16.11"
|
||||
resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.16.11.tgz#5dd88fd885fae36f88fd7c8342475c9f0abe2982"
|
||||
integrity sha512-qcmWG8R7ZW6WBRPZK//y+E3Cli151B20W1Rv7ln27vuPaXU/8TKms6jFdiJtF7UDTxcrb7mZd88tAeK9LjdT8g==
|
||||
|
|
@ -1010,7 +1017,7 @@
|
|||
"@babel/types" "^7.4.4"
|
||||
esutils "^2.0.2"
|
||||
|
||||
"@babel/preset-react@^7.12.10":
|
||||
"@babel/preset-react@^7.12.10", "@babel/preset-react@^7.12.5":
|
||||
version "7.16.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.16.7.tgz#4c18150491edc69c183ff818f9f2aecbe5d93852"
|
||||
integrity sha512-fWpyI8UM/HE6DfPBzD8LnhQ/OcH8AgTaqcqP2nGOXEUV+VKBR5JRN9hCk9ai+zQQ57vtm9oWeXguBCPNUjytgA==
|
||||
|
|
@ -1074,7 +1081,7 @@
|
|||
debug "^4.1.0"
|
||||
globals "^11.1.0"
|
||||
|
||||
"@babel/types@^7.0.0", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
|
||||
"@babel/types@^7.0.0", "@babel/types@^7.12.6", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
|
||||
version "7.17.0"
|
||||
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
|
||||
integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
|
||||
|
|
@ -1672,6 +1679,109 @@
|
|||
remark "^13.0.0"
|
||||
unist-util-find-all-after "^3.0.2"
|
||||
|
||||
"@svgr/babel-plugin-add-jsx-attribute@^5.4.0":
|
||||
version "5.4.0"
|
||||
resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz#81ef61947bb268eb9d50523446f9c638fb355906"
|
||||
integrity sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==
|
||||
|
||||
"@svgr/babel-plugin-remove-jsx-attribute@^5.4.0":
|
||||
version "5.4.0"
|
||||
resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz#6b2c770c95c874654fd5e1d5ef475b78a0a962ef"
|
||||
integrity sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==
|
||||
|
||||
"@svgr/babel-plugin-remove-jsx-empty-expression@^5.0.1":
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz#25621a8915ed7ad70da6cea3d0a6dbc2ea933efd"
|
||||
integrity sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==
|
||||
|
||||
"@svgr/babel-plugin-replace-jsx-attribute-value@^5.0.1":
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz#0b221fc57f9fcd10e91fe219e2cd0dd03145a897"
|
||||
integrity sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==
|
||||
|
||||
"@svgr/babel-plugin-svg-dynamic-title@^5.4.0":
|
||||
version "5.4.0"
|
||||
resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz#139b546dd0c3186b6e5db4fefc26cb0baea729d7"
|
||||
integrity sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==
|
||||
|
||||
"@svgr/babel-plugin-svg-em-dimensions@^5.4.0":
|
||||
version "5.4.0"
|
||||
resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz#6543f69526632a133ce5cabab965deeaea2234a0"
|
||||
integrity sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==
|
||||
|
||||
"@svgr/babel-plugin-transform-react-native-svg@^5.4.0":
|
||||
version "5.4.0"
|
||||
resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz#00bf9a7a73f1cad3948cdab1f8dfb774750f8c80"
|
||||
integrity sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==
|
||||
|
||||
"@svgr/babel-plugin-transform-svg-component@^5.5.0":
|
||||
version "5.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.5.0.tgz#583a5e2a193e214da2f3afeb0b9e8d3250126b4a"
|
||||
integrity sha512-q4jSH1UUvbrsOtlo/tKcgSeiCHRSBdXoIoqX1pgcKK/aU3JD27wmMKwGtpB8qRYUYoyXvfGxUVKchLuR5pB3rQ==
|
||||
|
||||
"@svgr/babel-preset@^5.5.0":
|
||||
version "5.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-5.5.0.tgz#8af54f3e0a8add7b1e2b0fcd5a882c55393df327"
|
||||
integrity sha512-4FiXBjvQ+z2j7yASeGPEi8VD/5rrGQk4Xrq3EdJmoZgz/tpqChpo5hgXDvmEauwtvOc52q8ghhZK4Oy7qph4ig==
|
||||
dependencies:
|
||||
"@svgr/babel-plugin-add-jsx-attribute" "^5.4.0"
|
||||
"@svgr/babel-plugin-remove-jsx-attribute" "^5.4.0"
|
||||
"@svgr/babel-plugin-remove-jsx-empty-expression" "^5.0.1"
|
||||
"@svgr/babel-plugin-replace-jsx-attribute-value" "^5.0.1"
|
||||
"@svgr/babel-plugin-svg-dynamic-title" "^5.4.0"
|
||||
"@svgr/babel-plugin-svg-em-dimensions" "^5.4.0"
|
||||
"@svgr/babel-plugin-transform-react-native-svg" "^5.4.0"
|
||||
"@svgr/babel-plugin-transform-svg-component" "^5.5.0"
|
||||
|
||||
"@svgr/core@^5.5.0":
|
||||
version "5.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@svgr/core/-/core-5.5.0.tgz#82e826b8715d71083120fe8f2492ec7d7874a579"
|
||||
integrity sha512-q52VOcsJPvV3jO1wkPtzTuKlvX7Y3xIcWRpCMtBF3MrteZJtBfQw/+u0B1BHy5ColpQc1/YVTrPEtSYIMNZlrQ==
|
||||
dependencies:
|
||||
"@svgr/plugin-jsx" "^5.5.0"
|
||||
camelcase "^6.2.0"
|
||||
cosmiconfig "^7.0.0"
|
||||
|
||||
"@svgr/hast-util-to-babel-ast@^5.5.0":
|
||||
version "5.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.5.0.tgz#5ee52a9c2533f73e63f8f22b779f93cd432a5461"
|
||||
integrity sha512-cAaR/CAiZRB8GP32N+1jocovUtvlj0+e65TB50/6Lcime+EA49m/8l+P2ko+XPJ4dw3xaPS3jOL4F2X4KWxoeQ==
|
||||
dependencies:
|
||||
"@babel/types" "^7.12.6"
|
||||
|
||||
"@svgr/plugin-jsx@^5.5.0":
|
||||
version "5.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-5.5.0.tgz#1aa8cd798a1db7173ac043466d7b52236b369000"
|
||||
integrity sha512-V/wVh33j12hGh05IDg8GpIUXbjAPnTdPTKuP4VNLggnwaHMPNQNae2pRnyTAILWCQdz5GyMqtO488g7CKM8CBA==
|
||||
dependencies:
|
||||
"@babel/core" "^7.12.3"
|
||||
"@svgr/babel-preset" "^5.5.0"
|
||||
"@svgr/hast-util-to-babel-ast" "^5.5.0"
|
||||
svg-parser "^2.0.2"
|
||||
|
||||
"@svgr/plugin-svgo@^5.5.0":
|
||||
version "5.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-5.5.0.tgz#02da55d85320549324e201c7b2e53bf431fcc246"
|
||||
integrity sha512-r5swKk46GuQl4RrVejVwpeeJaydoxkdwkM1mBKOgJLBUJPGaLci6ylg/IjhrRsREKDkr4kbMWdgOtbXEh0fyLQ==
|
||||
dependencies:
|
||||
cosmiconfig "^7.0.0"
|
||||
deepmerge "^4.2.2"
|
||||
svgo "^1.2.2"
|
||||
|
||||
"@svgr/webpack@^5.5.0":
|
||||
version "5.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-5.5.0.tgz#aae858ee579f5fa8ce6c3166ef56c6a1b381b640"
|
||||
integrity sha512-DOBOK255wfQxguUta2INKkzPj6AIS6iafZYiYmHn6W3pHlycSRRlvWKCfLDG10fXfLWqE3DJHgRUOyJYmARa7g==
|
||||
dependencies:
|
||||
"@babel/core" "^7.12.3"
|
||||
"@babel/plugin-transform-react-constant-elements" "^7.12.1"
|
||||
"@babel/preset-env" "^7.12.1"
|
||||
"@babel/preset-react" "^7.12.5"
|
||||
"@svgr/core" "^5.5.0"
|
||||
"@svgr/plugin-jsx" "^5.5.0"
|
||||
"@svgr/plugin-svgo" "^5.5.0"
|
||||
loader-utils "^2.0.0"
|
||||
|
||||
"@tootallnate/once@1":
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
|
||||
|
|
@ -3211,7 +3321,7 @@ camelcase@^5.0.0, camelcase@^5.3.1:
|
|||
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
|
||||
integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
|
||||
|
||||
camelcase@^6.0.0:
|
||||
camelcase@^6.0.0, camelcase@^6.2.0:
|
||||
version "6.3.0"
|
||||
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
|
||||
integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
|
||||
|
|
@ -12001,12 +12111,17 @@ supports-preserve-symlinks-flag@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
|
||||
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
|
||||
|
||||
svg-parser@^2.0.2:
|
||||
version "2.0.4"
|
||||
resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
|
||||
integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
|
||||
|
||||
svg-tags@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
|
||||
integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
|
||||
|
||||
svgo@^1.0.0:
|
||||
svgo@^1.0.0, svgo@^1.2.2:
|
||||
version "1.3.2"
|
||||
resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
|
||||
integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
|
||||
|
|
|
|||
Loading…
Reference in New Issue