Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 05:04:57 +08:00
Code Issues Packages Projects Releases Wiki Activity
11e0a3a8fa
element-web-Github/docs/icons.md
Kerry e6ea58e84d
Load icons using @svgr (#7928) 
* extend svg module

Signed-off-by: Kerry Archibald <kerrya@element.io>

* POC in QuickSettingsButton

Signed-off-by: Kerry Archibald <kerrya@element.io>

* stylelint

Signed-off-by: Kerry Archibald <kerrya@element.io>

* update copyright

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove aria-hidden, quick docs

Signed-off-by: Kerry Archibald <kerrya@element.io>
2022-03-02 10:18:45 +01:00

1.1 KiB
Raw Blame History

Icons

Icons are loaded using @svgr/webpack. This is configured in element-web

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 <>
        <FavoriteIcon>
        <FavoriteIcon className="mx_MyComponent-icon" role="img" aria-hidden="false">
    </>;
}

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 <>
        <FavoriteIcon>
        <FavoriteIcon className="mx_MyComponent-icon" role="img" aria-hidden="false">
    </>;
}