Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: added information on the icons color overwriting possibility #3458

Merged
merged 4 commits into from
Nov 14, 2024
Merged

docs: added information on the icons color overwriting possibility #3458

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e000c39
docs: added information on the icons color overwriting possibility
mfranzke Nov 13, 2024
a15c974
Merge branch 'main' into 3457-docsicons-how-to-overwrite-colors
mfranzke Nov 13, 2024
92d4a99
Merge branch 'main' into 3457-docsicons-how-to-overwrite-colors
mfranzke Nov 14, 2024
aa31d91
Update Icons.md
mfranzke Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/foundations/docs/Icons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
- We use icon fonts as **woff2** files for all our icons.
- We auto generate these files out of `.svg` files.
- A lot of our [components](../../components/readme) have an `icon` property you can pass in.
- Use the CSS Custom Property `--db-icon-color` to overwrite the icons color.

## How to include icons

Expand All @@ -19,6 +20,10 @@ You can add an icon before or after a tag, by adding an `data-` attribute to you
| `before` | `data-icon="icon-from-overview"` |
| `after` | `data-icon-after="icon-from-overview"` |

### Icons color

You could use the CSS Custom Property `--db-icon-color` to overwrite the icons color, be it icon fonts or when using the SVG files directly. Or `--db-icon-pulse-color` for the illustrative icons pulse color.

## Custom Icons

If you have custom icons and want to use them for foundations and/or in components, you need to generate a **woff2** file.
Expand Down
Loading