matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-07-28 15:22:05 +03:00
Code Activity

Load icons using @svgr (#7928)

Browse Source 
* 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>
This commit is contained in:
Kerry
2022-03-02 10:18:45 +01:00
committed by GitHub
parent d50dae5208
commit e6ea58e84d
4 changed files with 70 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
docs/icons.md Normal file
View File

@ -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 <>
<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">
</>;
}
```