misc fixes

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html

@@ -17,7 +17,7 @@
   <auth-anon-layout
     [title]="pageTitle"
     [subtitle]="pageSubtitle"
-    [content]="pageIcon"
+    [icon]="pageIcon"
     [showReadonlyHostname]="showReadonlyHostname"
     [hideLogo]="true"
     [maxWidth]="maxWidth"

libs/assets/README.md

@@ -8,9 +8,9 @@ This lib contains assets used by the Bitwarden clients. Unused assets are tree-s
 
 ### SVGs
 
-SVGs intended to be used with the `bit-icon` component live in `src/svgs`. These SVGs are built with the `icon-service` for security reasons. These SVGs can be viewed in our Component Library [Icon Story](https://components.bitwarden.com/?path=/story/component-library-icon--default).
+SVGs intended to be used with the `bit-svg` component live in `src/svgs`. These SVGs are built with the `svg` function for security reasons. These SVGs can be viewed in our Component Library [SVG Story](https://components.bitwarden.com/?path=/story/component-library-svg--default).
 
-When adding a new SVG, follow the instructions in our Component Library: [SVG Icon Docs](https://components.bitwarden.com/?path=/docs/component-library-icon--docs)
+When adding a new SVG, follow the instructions in our Component Library: [SVG Docs](https://components.bitwarden.com/?path=/docs/component-library-svg--docs)
 
 When importing an SVG in one of the clients:
 `import { ExampleSvg } from "@bitwarden/assets/svg";`

libs/components/src/svg/svg.mdx

@@ -26,12 +26,12 @@ import { SvgModule } from "@bitwarden/components";
 2. **Rename the file** as a `<name>.icon.ts` TypeScript file and place it in the `libs/assets/svg`
    lib.
 
-3. **Import** `svgIcon` from `./icon-service`.
+3. **Import** `svg` from `./svg`.
 
-4. **Define and export** a `const` to represent your `svgIcon`.
+4. **Define and export** a `const` to represent your `svg`.
 
    ```typescript
-   export const ExampleIcon = svgIcon`<svg … </svg>`;
+   export const ExampleIcon = svg`<svg … </svg>`;
    ```
 
 5. **Replace any hardcoded strokes or fills** with the appropriate Tailwind class.

libs/components/src/svg/svg.stories.ts

@@ -20,9 +20,9 @@ const {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   DynamicContentNotAllowedError: _DynamicContentNotAllowedError,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  isIcon,
+  isBitSvg,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  svgIcon,
+  svg,
   ...Icons
 }: {
   [key: string]: any;

libs/eslint/components/require-theme-colors-in-svg.mjs

@@ -25,7 +25,7 @@ export default {
           tagNames: {
             type: "array",
             items: { type: "string" },
-            default: ["svgIcon"],
+            default: ["svg"],
           },
         },
         additionalProperties: false,
@@ -35,7 +35,7 @@ export default {
 
   create(context) {
     const options = context.options[0] || {};
-    const tagNames = options.tagNames || ["svgIcon"];
+    const tagNames = options.tagNames || ["svg"];
 
     function isSvgTaggedTemplate(node) {
       return (