From 2605c03c816dd5f53a4e3fb10e8bf3a8091ea796 Mon Sep 17 00:00:00 2001 From: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com> Date: Fri, 18 Oct 2024 12:14:29 -0400 Subject: [PATCH] Update Icon Docs to include information on viewbox scaling (#11613) --- libs/components/src/icon/icon.mdx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/libs/components/src/icon/icon.mdx b/libs/components/src/icon/icon.mdx index d8b881b7e8..fc1c4cd3d5 100644 --- a/libs/components/src/icon/icon.mdx +++ b/libs/components/src/icon/icon.mdx @@ -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"; ``` -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.