OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Improve icon doc (#9869)

pull/28217/head
Michael Weimann 2023-01-09 08:11:32 +01:00 committed by GitHub
parent ff34fc71d9
commit fbfa174ad0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
docs/icons.md
View File

@ -1,29 +1,37 @@
# Icons # 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) 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`. 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. Icons have `role="presentation"` and `aria-hidden` automatically applied. These can be overriden by passing props to the icon component.
eg SVG file recommendations:
- Colours should not be defined absolutely. Use `currentColor` instead.
- There should not be a padding in SVG files. It should be added by CSS.
Example usage:
``` ```
import { Icon as FavoriteIcon } from 'res/img/element-icons/favorite.svg'; import { Icon as FavoriteIcon } from 'res/img/element-icons/favorite.svg';
const MyComponent = () => { const MyComponent = () => {
return <> return <>
<FavoriteIcon> <FavoriteIcon className="mx_Icon mx_Icon_16">
<FavoriteIcon className="mx_MyComponent-icon" role="img" aria-hidden="false">
</>; </>;
} }
``` ```
## Styling If possible, use the icon classes from [here](../res/css/compound/_Icon.pcss).
Icon components are svg elements and can be styled as usual. ## Custom styling
``` Icon components are svg elements and may be custom styled as usual.
// _MyComponents.pcss
`_MyComponents.pcss`:
```css
.mx_MyComponent-icon { .mx_MyComponent-icon {
height: 20px; height: 20px;
width: 20px; width: 20px;
@ -32,13 +40,15 @@ Icon components are svg elements and can be styled as usual.
fill: $accent; fill: $accent;
} }
} }
```
// MyComponent.tsx `MyComponent.tsx`:
```typescript
import { Icon as FavoriteIcon } from 'res/img/element-icons/favorite.svg'; import { Icon as FavoriteIcon } from 'res/img/element-icons/favorite.svg';
const MyComponent = () => { const MyComponent = () => {
return <> return <>
<FavoriteIcon>
<FavoriteIcon className="mx_MyComponent-icon" role="img" aria-hidden="false"> <FavoriteIcon className="mx_MyComponent-icon" role="img" aria-hidden="false">
</>; </>;
} }