From e6ea58e84dfcecf69548716ae1b738dbdbf18d3c Mon Sep 17 00:00:00 2001 From: Kerry Date: Wed, 2 Mar 2022 10:18:45 +0100 Subject: [PATCH] Load icons using @svgr (#7928) * extend svg module Signed-off-by: Kerry Archibald * POC in QuickSettingsButton Signed-off-by: Kerry Archibald * stylelint Signed-off-by: Kerry Archibald * update copyright Signed-off-by: Kerry Archibald * remove aria-hidden, quick docs Signed-off-by: Kerry Archibald --- docs/icons.md | 44 +++++++++++++ res/css/structures/_QuickSettingsButton.scss | 64 ++++--------------- src/@types/svg.d.ts | 2 + .../views/spaces/QuickSettingsButton.tsx | 13 +++- 4 files changed, 70 insertions(+), 53 deletions(-) create mode 100644 docs/icons.md diff --git a/docs/icons.md b/docs/icons.md new file mode 100644 index 0000000000..d478b5407d --- /dev/null +++ b/docs/icons.md @@ -0,0 +1,44 @@ +# Icons + +Icons are loaded using [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack). This is configured in [element-web](https://github.com/vector-im/element-web/blob/develop/webpack.config.js#L458) + +Each .svg exports a `ReactComponent` at the named export `Icon`. +Icons have `role="presentation"` and `aria-hidden` automatically applied. These can be overriden by passing props to the icon component. + +eg +``` +import { Icon as FavoriteIcon } from 'res/img/element-icons/favorite.svg'; + +const MyComponent = () => { + return <> + + + ; +} +``` + +## Styling + +Icon components are svg elements and can be styled as usual. + +``` +// _MyComponents.scss +.mx_MyComponent-icon { + height: 20px; + width: 20px; + + * { + fill: $accent; + } +} + +// MyComponent.tsx +import { Icon as FavoriteIcon } from 'res/img/element-icons/favorite.svg'; + +const MyComponent = () => { + return <> + + + ; +} +``` \ No newline at end of file diff --git a/res/css/structures/_QuickSettingsButton.scss b/res/css/structures/_QuickSettingsButton.scss index 0c58e44982..17417fa36f 100644 --- a/res/css/structures/_QuickSettingsButton.scss +++ b/res/css/structures/_QuickSettingsButton.scss @@ -82,21 +82,6 @@ limitations under the License. .mx_QuickSettingsButton_pinToSidebarHeading { padding-left: 24px; position: relative; - - &::before { - background-color: $secondary-content; - content: ""; - mask-repeat: no-repeat; - mask-position: center; - mask-size: contain; - mask-image: url('$(res)/img/element-icons/room/pin-upright.svg'); - width: 16px; - height: 16px; - position: absolute; - left: 0; - top: 50%; - transform: translateY(-50%); - } } .mx_Checkbox { @@ -112,31 +97,9 @@ limitations under the License. font-size: $font-15px; line-height: $font-24px; color: $secondary-content; - - &::before { - background-color: $secondary-content; - content: ""; - mask-repeat: no-repeat; - mask-position: center; - mask-size: contain; - width: 16px; - height: 16px; - position: absolute; - left: 0; - top: 50%; - transform: translateY(-50%); - } } } - .mx_QuickSettingsButton_favouritesCheckbox .mx_Checkbox_background + div::before { - mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg'); - } - - .mx_QuickSettingsButton_peopleCheckbox .mx_Checkbox_background + div::before { - mask-image: url('$(res)/img/element-icons/room/members.svg'); - } - .mx_QuickSettingsButton_moreOptionsButton { padding-left: 22px; margin-left: 22px; @@ -145,20 +108,17 @@ limitations under the License. color: $secondary-content; position: relative; margin-bottom: 16px; - - &::before { - background-color: $secondary-content; - content: ""; - mask-repeat: no-repeat; - mask-position: center; - mask-size: contain; - width: 16px; - height: 16px; - position: absolute; - left: 0; - top: 50%; - transform: translateY(-50%); - mask-image: url('$(res)/img/element-icons/room/ellipsis.svg'); - } } } + +.mx_QuickSettingsButton_icon { + * { + fill: $secondary-content; + } + width: 16px; + height: 16px; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); +} diff --git a/src/@types/svg.d.ts b/src/@types/svg.d.ts index 96f671c52f..f4b99be05b 100644 --- a/src/@types/svg.d.ts +++ b/src/@types/svg.d.ts @@ -1,5 +1,6 @@ /* Copyright 2021 Šimon Brandner +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. @@ -16,5 +17,6 @@ limitations under the License. declare module "*.svg" { const path: string; + export const Icon: React.FC>; export default path; } diff --git a/src/components/views/spaces/QuickSettingsButton.tsx b/src/components/views/spaces/QuickSettingsButton.tsx index ecd760bd7a..c131bfb47a 100644 --- a/src/components/views/spaces/QuickSettingsButton.tsx +++ b/src/components/views/spaces/QuickSettingsButton.tsx @@ -29,6 +29,10 @@ import defaultDispatcher from "../../../dispatcher/dispatcher"; import { Action } from "../../../dispatcher/actions"; import { UserTab } from "../dialogs/UserSettingsDialog"; import QuickThemeSwitcher from "./QuickThemeSwitcher"; +import { Icon as PinUprightIcon } from '../../../../res/img/element-icons/room/pin-upright.svg'; +import { Icon as EllipsisIcon } from '../../../../res/img/element-icons/room/ellipsis.svg'; +import { Icon as MembersIcon } from '../../../../res/img/element-icons/room/members.svg'; +import { Icon as FavoriteIcon } from '../../../../res/img/element-icons/roomlist/favorite.svg'; const QuickSettingsButton = ({ isPanelCollapsed = false }) => { const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu(); @@ -59,13 +63,17 @@ const QuickSettingsButton = ({ isPanelCollapsed = false }) => { { _t("All settings") } -

{ _t("Pin to sidebar") }

+

+ + { _t("Pin to sidebar") } +

+ { _t("Favourites") } { checked={!!peopleEnabled} onChange={onMetaSpaceChangeFactory(MetaSpace.People, "WebQuickSettingsPinToSidebarCheckbox")} > + + { _t("People") } { }); }} > + { _t("More options") }