mirror of
https://github.com/bitwarden/browser
synced 2025-12-06 00:13:28 +00:00
[CL-706] Display all svg icons in Storybook (#16111)
This commit is contained in:
Vicki League
GitHub
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -29,13 +29,13 @@ export const RegistrationLockAltIcon = svgIcon`
|
||||
<path class="tw-fill-art-primary" fill-rule="evenodd"
|
||||
d="M59.41 81.8a1 1 0 0 1 1.26-.644l5.548 1.797a1 1 0 1 1-.616 1.902l-5.548-1.796a1 1 0 0 1-.643-1.26ZM77.5 88.5a1 1 0 0 1 1-1h11a1 1 0 1 1 0 2h-11a1 1 0 0 1-1-1ZM94.5 88.5a1 1 0 0 1 1-1h11a1 1 0 0 1 0 2h-11a1 1 0 0 1-1-1Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-art-accent" fill-rule="evenodd"
|
||||
d="M105 72.5H46c-5.799 0-10.5 4.701-10.5 10.5v.5C35.5 89.299 40.201 94 46 94h59c5.799 0 10.5-4.701 10.5-10.5V83c0-5.799-4.701-10.5-10.5-10.5Zm-59-2c-6.904 0-12.5 5.596-12.5 12.5v.5C33.5 90.404 39.096 96 46 96h59c6.904 0 12.5-5.596 12.5-12.5V83c0-6.904-5.596-12.5-12.5-12.5H46Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-art-primary" fill-rule="evenodd"
|
||||
d="M30.5 42.5a7 7 0 0 0-7 7V85a7 7 0 0 0 7 7h9v2h-9a9 9 0 0 1-9-9V49.5a9 9 0 0 1 9-9h49a9 9 0 0 1 9 9v22.25h-2V49.5a7 7 0 0 0-7-7h-49Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-art-primary" fill-rule="evenodd"
|
||||
d="M54.75 5C43.592 5 34.5 14.056 34.5 25.15V41h-2V25.15C32.5 12.943 42.496 3 54.75 3 67.002 3 77 12.889 77 25.15V41h-2V25.15C75 14.005 65.91 5 54.75 5ZM51 54.158c0-1.996 1.543-3.658 3.5-3.658s3.5 1.662 3.5 3.658a3.722 3.722 0 0 1-1.201 2.758L56.8 57v6.106c0 1.298-1.006 2.395-2.3 2.395-1.294 0-2.3-1.097-2.3-2.395V57l.001-.083A3.722 3.722 0 0 1 51 54.158Zm3.5-2.658c-1.357 0-2.5 1.165-2.5 2.658a2.71 2.71 0 0 0 1.029 2.148l.231.18-.043.29c-.011.072-.017.147-.017.223v6.106c0 .795.606 1.395 1.3 1.395.694 0 1.3-.6 1.3-1.395V57c0-.076-.006-.15-.017-.224l-.043-.29.231-.179A2.71 2.71 0 0 0 57 54.158c0-1.493-1.143-2.658-2.5-2.658Z"
|
||||
clip-rule="evenodd" />
|
||||
<path class="tw-fill-art-accent" fill-rule="evenodd"
|
||||
d="M105 72.5H46c-5.799 0-10.5 4.701-10.5 10.5v.5C35.5 89.299 40.201 94 46 94h59c5.799 0 10.5-4.701 10.5-10.5V83c0-5.799-4.701-10.5-10.5-10.5Zm-59-2c-6.904 0-12.5 5.596-12.5 12.5v.5C33.5 90.404 39.096 96 46 96h59c6.904 0 12.5-5.596 12.5-12.5V83c0-6.904-5.596-12.5-12.5-12.5H46Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>`;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -10,7 +10,7 @@ const AnonLayoutBitwardenShield = svgIcon`
|
||||
`;
|
||||
|
||||
const BitwardenShield = svgIcon`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="32" fill="none"><g clip-path="url(#a)"><path class="tw-fill-text-alt2" d="M22.01 17.055V4.135h-9.063v22.954c1.605-.848 3.041-1.77 4.31-2.766 3.169-2.476 4.753-4.899 4.753-7.268Zm3.884-15.504v15.504a9.256 9.256 0 0 1-.677 3.442 12.828 12.828 0 0 1-1.68 3.029 18.708 18.708 0 0 1-2.386 2.574 27.808 27.808 0 0 1-2.56 2.08 32.251 32.251 0 0 1-2.448 1.564c-.85.49-1.453.824-1.81.999-.357.175-.644.31-.86.404-.162.08-.337.12-.526.12s-.364-.04-.526-.12a22.99 22.99 0 0 1-.86-.404c-.357-.175-.96-.508-1.81-1a32.242 32.242 0 0 1-2.448-1.564 27.796 27.796 0 0 1-2.56-2.08 18.706 18.706 0 0 1-2.386-2.573 12.828 12.828 0 0 1-1.68-3.029A9.256 9.256 0 0 1 0 17.055V1.551C0 1.2.128.898.384.642.641.386.944.26 1.294.26H24.6c.35 0 .654.127.91.383s.384.559.384.909Z"/></g><defs><clipPath id="a"><path class="tw-fill-text-alt2" d="M0 0h26v32H0z"/></clipPath></defs></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="32" fill="none"><g clip-path="url(#bitwarden-shield-clip)"><path class="tw-fill-text-alt2" d="M22.01 17.055V4.135h-9.063v22.954c1.605-.848 3.041-1.77 4.31-2.766 3.169-2.476 4.753-4.899 4.753-7.268Zm3.884-15.504v15.504a9.256 9.256 0 0 1-.677 3.442 12.828 12.828 0 0 1-1.68 3.029 18.708 18.708 0 0 1-2.386 2.574 27.808 27.808 0 0 1-2.56 2.08 32.251 32.251 0 0 1-2.448 1.564c-.85.49-1.453.824-1.81.999-.357.175-.644.31-.86.404-.162.08-.337.12-.526.12s-.364-.04-.526-.12a22.99 22.99 0 0 1-.86-.404c-.357-.175-.96-.508-1.81-1a32.242 32.242 0 0 1-2.448-1.564 27.796 27.796 0 0 1-2.56-2.08 18.706 18.706 0 0 1-2.386-2.573 12.828 12.828 0 0 1-1.68-3.029A9.256 9.256 0 0 1 0 17.055V1.551C0 1.2.128.898.384.642.641.386.944.26 1.294.26H24.6c.35 0 .654.127.91.383s.384.559.384.909Z"/></g><defs><clipPath id="bitwarden-shield-clip"><path class="tw-fill-text-alt2" d="M0 0h26v32H0z"/></clipPath></defs></svg>
|
||||
`;
|
||||
|
||||
export { AnonLayoutBitwardenShield, BitwardenShield };
|
||||
|
||||
@@ -2,7 +2,7 @@ import { svgIcon } from "../icon-service";
|
||||
|
||||
export const TwoFactorAuthAuthenticatorIcon = svgIcon`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 120 100">
|
||||
<g clip-path="url(#a)">
|
||||
<g clip-path="url(#two-factor-auth-authenticator-clip)">
|
||||
<path class="tw-fill-art-primary" fill-rule="evenodd"
|
||||
d="M47.967 84.718c0-.37.3-.67.67-.67h42.904a.67.67 0 1 1 0 1.34H48.637a.67.67 0 0 1-.67-.67Z"
|
||||
clip-rule="evenodd" />
|
||||
@@ -31,7 +31,7 @@ export const TwoFactorAuthAuthenticatorIcon = svgIcon`
|
||||
d="M13.411 75.183h1.537v-5.472l-1.84.878v-.941l1.83-.864h.989v6.4h1.517v.82h-4.033v-.82ZM19.806 75.178h3.357v.825h-4.44v-.825c.611-.637 1.145-1.2 1.601-1.688.457-.488.772-.833.945-1.033.326-.395.547-.713.66-.956.115-.246.172-.496.172-.752 0-.404-.12-.721-.362-.95-.238-.23-.566-.345-.984-.345-.297 0-.608.053-.935.16a5.264 5.264 0 0 0-1.037.485v-.99c.336-.158.665-.278.988-.359.327-.08.648-.121.964-.121.715 0 1.29.19 1.723.568.438.375.656.868.656 1.48 0 .31-.073.62-.22.93-.144.311-.378.654-.705 1.03-.183.21-.448.5-.798.873-.345.371-.874.928-1.585 1.668ZM53.79 37.121c.816 0 1.432.34 1.849 1.016.42.678.629 1.68.629 3.007 0 1.327-.21 2.329-.63 3.006-.416.677-1.032 1.016-1.847 1.016-.816 0-1.431-.339-1.848-1.016-.416-.677-.624-1.68-.624-3.006 0-1.327.208-2.33.624-3.007.416-.677 1.032-1.016 1.848-1.016Zm0 7.211c.485 0 .845-.262 1.08-.787.24-.524.359-1.325.359-2.401 0-.573-.034-1.091-.102-1.553l-2.437 3.882c.256.573.623.86 1.1.86Zm0-6.377c-.48 0-.84.262-1.08.787-.235.524-.352 1.325-.352 2.402 0 .49.032.948.097 1.375l2.385-3.871c-.26-.462-.609-.693-1.05-.693ZM60.106 37.121c.816 0 1.432.34 1.848 1.016.42.678.63 1.68.63 3.007 0 1.327-.21 2.329-.63 3.006-.416.677-1.032 1.016-1.848 1.016-.815 0-1.43-.339-1.847-1.016-.416-.677-.624-1.68-.624-3.006 0-1.327.208-2.33.624-3.007.416-.677 1.032-1.016 1.847-1.016Zm0 7.211c.485 0 .845-.262 1.08-.787.24-.524.359-1.325.359-2.401 0-.573-.035-1.091-.103-1.553l-2.436 3.882c.256.573.623.86 1.1.86Zm0-6.377c-.48 0-.84.262-1.08.787-.235.524-.353 1.325-.353 2.402 0 .49.033.948.098 1.375l2.385-3.871c-.26-.462-.61-.693-1.05-.693ZM66.422 37.121c.816 0 1.431.34 1.848 1.016.42.678.63 1.68.63 3.007 0 1.327-.21 2.329-.63 3.006-.416.677-1.032 1.016-1.848 1.016-.815 0-1.431-.339-1.847-1.016-.417-.677-.625-1.68-.625-3.006 0-1.327.208-2.33.624-3.007.417-.677 1.033-1.016 1.848-1.016Zm0 7.211c.485 0 .845-.262 1.08-.787.239-.524.358-1.325.358-2.401 0-.573-.034-1.091-.102-1.553l-2.436 3.882c.256.573.622.86 1.1.86Zm0-6.377c-.481 0-.84.262-1.08.787-.235.524-.353 1.325-.353 2.402 0 .49.032.948.097 1.375l2.385-3.871c-.259-.462-.609-.693-1.049-.693ZM76.433 37.121c.815 0 1.431.34 1.848 1.016.42.678.63 1.68.63 3.007 0 1.327-.21 2.329-.63 3.006-.417.677-1.033 1.016-1.848 1.016-.816 0-1.431-.339-1.848-1.016-.416-.677-.624-1.68-.624-3.006 0-1.327.208-2.33.624-3.007.417-.677 1.033-1.016 1.848-1.016Zm0 7.211c.484 0 .844-.262 1.08-.787.239-.524.358-1.325.358-2.401 0-.573-.034-1.091-.102-1.553l-2.436 3.882c.255.573.622.86 1.1.86Zm0-6.377c-.481 0-.841.262-1.08.787-.235.524-.353 1.325-.353 2.402 0 .49.032.948.097 1.375l2.385-3.871c-.26-.462-.609-.693-1.049-.693ZM82.749 37.121c.815 0 1.43.34 1.847 1.016.42.678.63 1.68.63 3.007 0 1.327-.21 2.329-.63 3.006-.416.677-1.032 1.016-1.847 1.016-.816 0-1.432-.339-1.848-1.016-.416-.677-.624-1.68-.624-3.006 0-1.327.208-2.33.624-3.007.416-.677 1.032-1.016 1.848-1.016Zm0 7.211c.484 0 .844-.262 1.08-.787.238-.524.358-1.325.358-2.401 0-.573-.034-1.091-.103-1.553l-2.436 3.882c.256.573.623.86 1.1.86Zm0-6.377c-.481 0-.841.262-1.08.787-.236.524-.353 1.325-.353 2.402 0 .49.032.948.097 1.375l2.385-3.871c-.26-.462-.61-.693-1.05-.693ZM89.064 37.121c.816 0 1.432.34 1.848 1.016.42.678.63 1.68.63 3.007 0 1.327-.21 2.329-.63 3.006-.416.677-1.032 1.016-1.848 1.016-.815 0-1.431-.339-1.847-1.016-.417-.677-.625-1.68-.625-3.006 0-1.327.208-2.33.625-3.007.416-.677 1.032-1.016 1.847-1.016Zm0 7.211c.485 0 .845-.262 1.08-.787.239-.524.358-1.325.358-2.401 0-.573-.034-1.091-.102-1.553l-2.436 3.882c.256.573.623.86 1.1.86Zm0-6.377c-.48 0-.84.262-1.08.787-.235.524-.353 1.325-.353 2.402 0 .49.033.948.097 1.375l2.385-3.871c-.259-.462-.609-.693-1.049-.693Z" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<clipPath id="two-factor-auth-authenticator-clip">
|
||||
<path fill="#fff" d="M0 0h120v100H0z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
@@ -2,7 +2,7 @@ import { svgIcon } from "../icon-service";
|
||||
|
||||
export const TwoFactorAuthDuoIcon = svgIcon`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 120 40">
|
||||
<g clip-path="url(#a)">
|
||||
<g clip-path="url(#two-factor-auth-duo-clip)">
|
||||
<path fill="#7BCD54" d="M19.359 39.412H0V20.97h38.694c-.505 10.27-8.968 18.44-19.335 18.44Z" />
|
||||
<path fill="#63C43F"
|
||||
d="M19.359.588H0V19.03h38.694C38.188 8.76 29.726.59 19.358.59ZM100.666.588c-10.367 0-18.83 8.172-19.335 18.441H120C119.496 8.76 111.033.59 100.666.59Z" />
|
||||
@@ -12,7 +12,7 @@ export const TwoFactorAuthDuoIcon = svgIcon`
|
||||
<path fill="#7BCD54" d="M79.37 39.412H60.98V.588h18.39v38.824Z" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<clipPath id="two-factor-auth-duo-clip">
|
||||
<path fill="#fff" d="M0 .588h120v38.824H0z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
@@ -2,7 +2,7 @@ import { svgIcon } from "../icon-service";
|
||||
|
||||
export const TwoFactorAuthSecurityKeyIcon = svgIcon`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 120 100">
|
||||
<g clip-path="url(#a)">
|
||||
<g clip-path="url(#two-factor-auth-security-key-clip-1)">
|
||||
<path class="tw-fill-art-primary" fill-rule="evenodd"
|
||||
d="M22.852 21.578H6.656v16.365h16.196V21.578ZM5.183 20.09v19.34h19.142V20.09H5.183Z"
|
||||
clip-rule="evenodd" />
|
||||
@@ -24,7 +24,7 @@ export const TwoFactorAuthSecurityKeyIcon = svgIcon`
|
||||
<path class="tw-fill-art-primary" fill-rule="evenodd"
|
||||
d="M18.435 18.603c0-2.465 1.978-4.463 4.417-4.463h86.136c2.439 0 4.417 1.998 4.417 4.463V67.7c0 2.465-1.978 4.463-4.417 4.463H26.901v-1.488h82.087c1.626 0 2.945-1.332 2.945-2.975V18.603c0-1.643-1.319-2.975-2.945-2.975H22.852c-1.626 0-2.945 1.332-2.945 2.975v2.232h-1.472v-2.232Z"
|
||||
clip-rule="evenodd" />
|
||||
<g clip-path="url(#b)">
|
||||
<g clip-path="url(#two-factor-auth-security-key-clip-2)">
|
||||
<path class="tw-fill-art-accent"
|
||||
d="M67.118 46.886a1.062 1.062 0 0 0-.138-.531 1.037 1.037 0 0 0-.381-.386 1.006 1.006 0 0 0-1.037.018 1.059 1.059 0 0 0-.324 1.46c.099.156.237.283.4.366v1.716a.48.48 0 0 0 .126.347.461.461 0 0 0 .333.147.446.446 0 0 0 .333-.147.482.482 0 0 0 .125-.347V47.81c.168-.086.31-.219.409-.382.099-.163.152-.35.154-.543Zm5.37-6.916h-.565a.337.337 0 0 1-.312-.215.358.358 0 0 1-.026-.133v-.255a5.896 5.896 0 0 0-1.374-3.901 5.645 5.645 0 0 0-3.567-1.972 5.4 5.4 0 0 0-2.268.263c-.73.248-1.4.65-1.97 1.181a5.634 5.634 0 0 0-1.332 1.896 5.75 5.75 0 0 0-.468 2.286v.413c0 .008-.03.434-.392.44h-.509a1.686 1.686 0 0 0-1.203.514c-.32.328-.498.772-.497 1.234v10.37c0 .463.178.907.497 1.234.318.328.75.515 1.203.518h12.783c.452-.003.884-.189 1.202-.517.319-.328.497-.772.497-1.234V41.721a1.776 1.776 0 0 0-.495-1.235 1.71 1.71 0 0 0-.552-.38 1.665 1.665 0 0 0-.653-.136h.001Zm-10.637-.85a4.442 4.442 0 0 1 .41-1.877 4.346 4.346 0 0 1 1.16-1.515 4.218 4.218 0 0 1 1.685-.855 4.17 4.17 0 0 1 1.881-.029 4.335 4.335 0 0 1 2.436 1.596c.61.8.934 1.79.918 2.806v.376a.358.358 0 0 1-.1.246.336.336 0 0 1-.24.102h-7.63a.468.468 0 0 1-.352-.115.51.51 0 0 1-.169-.336v-.399h.001Zm11.091 12.97a.477.477 0 0 1-.133.332.45.45 0 0 1-.322.139H59.705a.445.445 0 0 1-.323-.139.46.46 0 0 1-.132-.331V41.72a.474.474 0 0 1 .132-.331.456.456 0 0 1 .321-.138h12.784c.121 0 .237.05.322.138a.473.473 0 0 1 .133.33v10.37Z" />
|
||||
</g>
|
||||
@@ -41,10 +41,10 @@ export const TwoFactorAuthSecurityKeyIcon = svgIcon`
|
||||
clip-rule="evenodd" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<clipPath id="two-factor-auth-security-key-clip-1">
|
||||
<path fill="#fff" d="M0 0h120v100H0z" />
|
||||
</clipPath>
|
||||
<clipPath id="b">
|
||||
<clipPath id="two-factor-auth-security-key-clip-2">
|
||||
<path fill="#fff" d="M56.014 33.468h20.165v20.375H56.014z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
@@ -2,12 +2,12 @@ import { svgIcon } from "../icon-service";
|
||||
|
||||
export const TwoFactorAuthYubicoIcon = svgIcon`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 121 33">
|
||||
<g fill="#84BD00" clip-path="url(#a)">
|
||||
<g fill="#84BD00" clip-path="url(#two-factor-auth-yubico-clip)">
|
||||
<path
|
||||
d="M11.011 19.366 15.18 7.47h6.02L11.054 32.622H4.698l2.903-6.891L.5 7.47h6.147l4.364 11.895ZM42.446 25.872h-5.87V23.84c-.925.73-1.92 1.364-2.971 1.892-.9.432-1.971.648-3.216.646-2.014 0-3.562-.584-4.645-1.751-1.082-1.168-1.627-2.895-1.633-5.18V7.471h5.865v9.127c0 .929.03 1.702.09 2.319.036.533.177 1.054.414 1.532.199.396.53.71.935.884.418.186 1 .279 1.749.279a5.726 5.726 0 0 0 1.657-.28 7.101 7.101 0 0 0 1.757-.818V7.47h5.868v18.4ZM66.065 16.42c0 2.894-.793 5.254-2.38 7.078-1.586 1.824-3.565 2.736-5.935 2.736a9.864 9.864 0 0 1-2.68-.327 9.183 9.183 0 0 1-2.191-.95l-.245.916H47.01V.377h5.87v9.012a14.137 14.137 0 0 1 2.753-1.754 7.413 7.413 0 0 1 3.24-.671c2.305 0 4.08.84 5.327 2.52 1.245 1.68 1.867 3.992 1.865 6.935Zm-6.032.122c0-1.637-.276-2.897-.828-3.78-.553-.884-1.537-1.326-2.952-1.326-.577.004-1.15.09-1.704.254a6.987 6.987 0 0 0-1.67.72v9.227c.388.144.79.249 1.2.311a9.8 9.8 0 0 0 1.363.083c1.548 0 2.7-.459 3.455-1.375.755-.918 1.135-2.289 1.138-4.114h-.002ZM75.961 4.85h-6.195V.377h6.195V4.85ZM75.8 25.872h-5.87v-18.4h5.87v18.4ZM90.789 26.363a15.651 15.651 0 0 1-4.36-.572 9.575 9.575 0 0 1-3.438-1.77 8.005 8.005 0 0 1-2.244-3.015c-.53-1.211-.796-2.631-.797-4.26 0-1.716.285-3.196.854-4.44a8.377 8.377 0 0 1 2.382-3.097A9.675 9.675 0 0 1 86.6 7.504a14.864 14.864 0 0 1 4.017-.54c1.16-.01 2.319.127 3.446.408 1.013.26 1.999.616 2.944 1.066v5.03h-.83c-.225-.197-.499-.426-.82-.688a7.315 7.315 0 0 0-1.176-.77 7.73 7.73 0 0 0-1.46-.598 6.497 6.497 0 0 0-1.858-.234c-1.56 0-2.76.5-3.598 1.5-.839 1-1.255 2.357-1.25 4.072 0 1.77.43 3.114 1.29 4.03.86.918 2.08 1.376 3.662 1.376a7.202 7.202 0 0 0 1.988-.254 6.426 6.426 0 0 0 1.47-.597c.344-.201.67-.431.974-.688.282-.241.536-.475.779-.706h.829v5.041c-.931.434-1.9.778-2.896 1.028a13.455 13.455 0 0 1-3.323.383ZM120.4 16.68c0 3.027-.875 5.411-2.626 7.153-1.751 1.741-4.209 2.613-7.375 2.614-3.165 0-5.624-.871-7.374-2.614-1.751-1.743-2.627-4.127-2.627-7.153 0-3.048.882-5.44 2.644-7.176 1.763-1.735 4.215-2.603 7.357-2.605 3.187 0 5.651.874 7.391 2.622 1.74 1.747 2.61 4.134 2.61 7.16Zm-7.203 4.474a4.741 4.741 0 0 0 .852-1.696c.192-.661.287-1.576.286-2.745.018-.915-.08-1.829-.293-2.719a4.768 4.768 0 0 0-.818-1.753 2.853 2.853 0 0 0-1.251-.95 4.4 4.4 0 0 0-1.577-.28 4.607 4.607 0 0 0-1.504.229c-.489.192-.92.508-1.251.918a4.687 4.687 0 0 0-.854 1.754 10.45 10.45 0 0 0-.318 2.8c-.014.88.079 1.758.277 2.615.141.645.418 1.251.813 1.778a3.11 3.11 0 0 0 1.25.935 4.6 4.6 0 0 0 3.17.023 2.794 2.794 0 0 0 1.218-.909Z" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<clipPath id="two-factor-auth-yubico-clip">
|
||||
<path fill="#fff" d="M.5.377h120v32.247H.5z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
@@ -11,7 +11,7 @@ export const WebAuthnIcon = svgIcon`
|
||||
aria-label="[title]"
|
||||
>
|
||||
<title>Webauthn</title>
|
||||
<g stroke="currentColor" clip-path="url(#a)" transform="translate(-6.081,-1.143)">
|
||||
<g stroke="currentColor" clip-path="url(#webauthn-clip)" transform="translate(-6.081,-1.143)">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
@@ -36,7 +36,7 @@ export const WebAuthnIcon = svgIcon`
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="a"><path fill="#fff" d="M68.5.62H.5v61h68z" /></clipPath>
|
||||
<clipPath id="webauthn-clip"><path fill="#fff" d="M68.5.62H.5v61h68z" /></clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
@@ -77,7 +77,10 @@ import { IconModule } from "@bitwarden/components";
|
||||
- **Note:** Scaling is required for any SVG used as an
|
||||
[AnonLayout](?path=/docs/component-library-anon-layout--docs) `pageIcon`.
|
||||
|
||||
7. **Import your SVG const** anywhere you want to use the SVG.
|
||||
7. **Replace any generic `clipPath` ids** (such as `id="a"`) with a unique id, and update the
|
||||
referencing element to use the new id (such as `clip-path="url(#unique-id-here)"`).
|
||||
|
||||
8. **Import your SVG const** anywhere you want to use the SVG.
|
||||
- **Angular Component Example:**
|
||||
- **TypeScript:**
|
||||
|
||||
@@ -113,5 +116,5 @@ import { IconModule } from "@bitwarden/components";
|
||||
<bit-icon [icon]="Icons.ExampleIcon" [ariaLabel]="Your custom label text here"></bit-icon>
|
||||
```
|
||||
|
||||
8. **Ensure your SVG renders properly** according to Figma in both light and dark modes on a client
|
||||
9. **Ensure your SVG renders properly** according to Figma in both light and dark modes on a client
|
||||
which supports multiple style modes.
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Meta, StoryObj } from "@storybook/angular";
|
||||
import { Meta } from "@storybook/angular";
|
||||
|
||||
import * as SvgIcons from "@bitwarden/assets/svg";
|
||||
|
||||
@@ -15,25 +15,36 @@ export default {
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
type Story = StoryObj<BitIconComponent>;
|
||||
const {
|
||||
// Filtering out the few non-icons in the libs/assets/svg import
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
DynamicContentNotAllowedError: _DynamicContentNotAllowedError,
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
isIcon,
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
svgIcon,
|
||||
...Icons
|
||||
}: {
|
||||
[key: string]: any;
|
||||
} = SvgIcons;
|
||||
|
||||
// Filtering out the few non-icons in the libs/assets/svg import
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { DynamicContentNotAllowedError, isIcon, svgIcon, ...Icons } = SvgIcons;
|
||||
|
||||
export const Default: Story = {
|
||||
export const Default = {
|
||||
render: (args: { icons: [string, any][] }) => ({
|
||||
props: args,
|
||||
template: /*html*/ `
|
||||
<div class="tw-bg-secondary-100 tw-p-2 tw-grid tw-grid-cols-[repeat(auto-fit,minmax(224px,1fr))] tw-gap-2">
|
||||
@for (icon of icons; track icon[0]) {
|
||||
<div class="tw-size-56 tw-border tw-border-secondary-300 tw-rounded-md">
|
||||
<div class="tw-text-xs tw-text-center">{{icon[0]}}</div>
|
||||
<div class="tw-size-52 tw-w-full tw-content-center">
|
||||
<bit-icon [icon]="icon[1]" class="tw-flex tw-justify-center tw-max-h-full"></bit-icon>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
icon: Icons.NoAccess,
|
||||
},
|
||||
argTypes: {
|
||||
icon: {
|
||||
options: Object.keys(Icons),
|
||||
mapping: Icons,
|
||||
control: { type: "select" },
|
||||
},
|
||||
ariaLabel: {
|
||||
control: "text",
|
||||
description: "the text used by a screen reader to describe the icon",
|
||||
},
|
||||
icons: Object.entries(Icons),
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user