Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-10-22 07:50:04 +02:00
Code Issues Projects 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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 9 additions and 2 deletions
Show Stats 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.