bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-06 00:13:28 +00:00
Code Issues Releases Wiki Activity

Update Icon Docs to include information on viewbox scaling (#11613)

Browse Source
This commit is contained in:
Jared Snider
2024-10-18 12:14:29 -04:00
committed by GitHub
parent ad40db9ecf
commit 2605c03c81
1 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
libs/components/src/icon/icon.mdx
View File

@@ -67,7 +67,14 @@ import * as stories from "./icon.stories";
- Example: `--color-art-primary` corresponds to `tw-stroke-art-primary` or
`tw-fill-art-primary`.
6. **Import your SVG const** anywhere you want to use the SVG.
6. **Remove any hardcoded width or height attributes** if your SVG has a configured
[viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) attribute in order
to allow the SVG to scale to fit its container.
- **Note:** Scaling is required for any SVG used as an
[AnonLayout](?path=/docs/auth-anon-layout--docs) `pageIcon`.
7. **Import your SVG const** anywhere you want to use the SVG.
- **Angular Component Example:**
@@ -95,5 +102,5 @@ import * as stories from "./icon.stories";
<bit-icon [icon]="Icons.ExampleIcon"></bit-icon>
```
7. **Ensure your SVG renders properly** according to Figma in both light and dark modes on a client
8. **Ensure your SVG renders properly** according to Figma in both light and dark modes on a client
which supports multiple style modes.