@amedia/brick-mcp 1.0.3 → 1.0.4

package/data/components/brick-icons.md

@@ -1,8 +1,8 @@
 ---
 name: brick-icons
-version: 2.1.0
+version: 2.2.7
 category: Media
-tags: [icons, svg, sprite, graphics, design-system, figma]
+tags: [icons, svg, sprite, graphics, design-system, figma, brands-external, currentColor]
 use_cases:
   [
     icons,
@@ -12,26 +12,28 @@ use_cases:
     status-indicators,
     brand-icons,
     decorative-graphics,
+    external-brand-logos,
+    social-media-icons,
   ]
-related: [brick-button, brick-card, brick-actions]
+related: [brick-button, brick-icon, brick-card, brick-actions]
 ---
 
 # Brick Icons
 
-SVG icon sprite library providing theme-specific icon sets distributed via CDN for consistent, scalable graphics across Amedia's design system.
+SVG icon sprite library providing theme-specific icon sets and external brand logos, distributed via CDN, for consistent and scalable graphics across Amedia's design system.
 
 ## Key Capabilities
 
 - **Theme-Specific Sprites**: Separate SVG sprite files for each theme (alfa, bravo, charlie, nettavisen, alt)
-- **CDN Distribution**: Icons served via Eik CDN for optimal performance and caching
+- **External Brand Logos**: Individual SVG files for social media and partner brand logos via the `brands-external` collection
+- **CDN Distribution**: Icons and brands served via Eik CDN with version aliasing for automatic updates within major versions
 - **Figma Automation**: Icons automatically synced from Figma using Figmagic
-- **Scalable Graphics**: SVG format ensures crisp rendering at any size without quality loss
-- **Color Inheritance**: Icons use `currentColor` for easy color customization via CSS
-- **Comprehensive Icon Set**: Includes navigation, action, status, social, and brand icons
+- **Color Inheritance**: Most icons use `currentColor` for fill/stroke, allowing easy color customization via CSS
+- **Comprehensive Icon Set**: Includes navigation, action, status, media, social, tag/pill, and brand icons across all themes
 
 ## Available Themes
 
-| Theme      | CDN Path                                                                       |
+| Theme      | CDN Sprite Path                                                                |
 | ---------- | ------------------------------------------------------------------------------ |
 | alfa       | `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg`       |
 | bravo      | `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/bravo/icons.svg`      |
@@ -41,34 +43,40 @@ SVG icon sprite library providing theme-specific icon sets distributed via CDN f
 
 ## Icon Categories
 
-**Navigation**: arrow-down, arrow-up, arrow-left, arrow-right, arrow-dropdown, arrow-dropup, chevron-down, chevron-up, close, menu
+**Navigation**: arrow-down, arrow-up, arrow-left, arrow-right, arrow-dropdown, arrow-dropup, chevron-down, chevron-up, chevron-right, chevron-right-small, close, menu, menu-vertical, left, portal-arrow-right, log-out
 
-**Actions**: add, delete, copy, share, share-url, edit, settings-fill, settings-outline, camera, gift
+**Actions**: add, delete, copy, share, share-url, edit, settings-fill, settings-outline, camera, gift, download, exchange, search, plus, more-horizontal
 
-**Status**: checkmark, checkmark-toggle, check-circle, error-circle, warning-circle, info-circle, lock, notification-off
+**Status**: checkmark, checkmark-toggle, check-circle, error-circle, warning-circle, info-circle, lock, notification-off, notification-on, dotted-circle
 
-**Media**: play, pause, replay, volume-on, volume-off, desktop, mobile
+**Media**: play, pause, replay, volume-on, volume-off, desktop, mobile, image, pill-video, pill-podcast, pill-gallery
 
-**Social/Brand**: facebook, instagram, linkedin, twitter, youtube, appstore, googleplay
+**Finance / Account**: bolt, calendar, credit-card, envelope-send, history, hourglass, invoice, sending-success, stop-sending, subscription, trophy, user-exclamation, user-square, users, customer-service
 
-**Tags/Labels**: pill-tag, pill-video, pill-breaking, pill-untold, plusall, tag-fill, tag-outline
+**Tags / Labels**: pill-tag, pill-breaking, pill-untold, pill-alt, pill-countdown, plusall, plusall-original, tag-fill, tag-outline, tag
 
-**Other**: clock, datepicker, dice-1 through dice-6, logo-alt
+**Information**: book-open, comment-question, eye, fire, graph-bar, map, newspaper, pie-chart, shield, star, location-pin, mail, clock, datepicker
 
-## Examples
+**Other**: dice-1 through dice-6, logo-alt, aID, premiumiconlarge, email, message, my-greetings
 
-### Basic Icon Usage
+**External Brands** (individual SVG files, not in sprite): bluesky, facebook, facebookmessenger, instagram, linkedin, norsktipping, rikstoto, signal, snapchat, telegram, tiktok, whatsapp, x, youtube
+
+## Usage
+
+### SVG Sprite Icons (CDN)
+
+Reference icons from the theme-specific sprite sheet using an SVG `<use>` element:
 
 ```html
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-  <use
-    href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#checkmark"
-  ></use>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true">
+  <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#checkmark"></use>
 </svg>
 ```
 
 ### Accessible Icon with Title
 
+When an icon conveys meaning (informative icon), provide a `<title>` and `aria-labelledby`:
+
 ```html
 <svg
   xmlns="http://www.w3.org/2000/svg"
@@ -77,14 +85,14 @@ SVG icon sprite library providing theme-specific icon sets distributed via CDN f
   aria-labelledby="search-title"
 >
   <title id="search-title">Search</title>
-  <use
-    href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#search"
-  ></use>
+  <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#search"></use>
 </svg>
 ```
 
 ### Decorative Icon (Hidden from Screen Readers)
 
+When an icon is purely decorative and paired with visible text, hide it from assistive technology:
+
 ```html
 <svg
   xmlns="http://www.w3.org/2000/svg"
@@ -92,24 +100,22 @@ SVG icon sprite library providing theme-specific icon sets distributed via CDN f
   height="24"
   aria-hidden="true"
 >
-  <use
-    href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/nettavisen/icons.svg#arrow-right"
-  ></use>
+  <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/nettavisen/icons.svg#arrow-right"></use>
 </svg>
 ```
 
 ### Icon with Custom Color and Size
 
+Icons using `currentColor` inherit the CSS `color` property:
+
 ```html
 <svg
   xmlns="http://www.w3.org/2000/svg"
   width="32"
   height="32"
-  style="color: #ff0000;"
+  style="color: #00aa00;"
 >
-  <use
-    href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/charlie/icons.svg#heart"
-  ></use>
+  <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/charlie/icons.svg#check-circle"></use>
 </svg>
 ```
 
@@ -123,95 +129,45 @@ SVG icon sprite library providing theme-specific icon sets distributed via CDN f
     height="20"
     aria-hidden="true"
   >
-    <use
-      href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#add"
-    ></use>
+    <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#add"></use>
   </svg>
   Add Item
 </brick-button-v9>
 ```
 
-### Social Media Icon Link
+### External Brand Logo Usage
+
+External brand logos are served as individual SVG files (not inside a sprite sheet). Use the full semver version in the URL path:
 
 ```html
 <a href="https://facebook.com/example" aria-label="Follow us on Facebook">
   <svg
-    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
     width="24"
     height="24"
-    aria-hidden="true"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <use
-      href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alt/icons.svg#facebook"
-    ></use>
+    <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/2.2.7/brands-external/facebook.svg"></use>
   </svg>
 </a>
 ```
 
-## Framework Integration
-
-### Svelte
-
-```svelte
-<script>
-  const theme = 'alfa';
-  const iconName = 'checkmark';
-  const iconUrl = `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/${theme}/icons.svg#${iconName}`;
-</script>
-
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-  <use href={iconUrl}></use>
-</svg>
-```
+### Social Media Links with External Brands
 
-### React
-
-```jsx
-function Icon({ theme, name, size = 24, title }) {
-  const iconUrl = `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/${theme}/icons.svg#${name}`;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      aria-labelledby={title ? `icon-${name}` : undefined}
-    >
-      {title && <title id={`icon-${name}`}>{title}</title>}
-      <use href={iconUrl}></use>
+```html
+<nav aria-label="Social media" style="display: flex; gap: 16px;">
+  <a href="https://instagram.com/example" aria-label="Instagram">
+    <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/2.2.7/brands-external/instagram.svg"></use>
     </svg>
-  );
-}
-
-// Usage
-<Icon theme="alfa" name="checkmark" title="Success" />;
-```
-
-### Vue
-
-```vue
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size">
-    <title v-if="title">{{ title }}</title>
-    <use :href="iconUrl"></use>
-  </svg>
-</template>
-
-<script>
-export default {
-  props: {
-    theme: { type: String, required: true },
-    name: { type: String, required: true },
-    size: { type: Number, default: 24 },
-    title: String,
-  },
-  computed: {
-    iconUrl() {
-      return `https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/${this.theme}/icons.svg#${this.name}`;
-    },
-  },
-};
-</script>
+  </a>
+  <a href="https://linkedin.com/example" aria-label="LinkedIn">
+    <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/2.2.7/brands-external/linkedin.svg"></use>
+    </svg>
+  </a>
+</nav>
 ```
 
 ## Programmatic Usage
@@ -227,7 +183,6 @@ console.log(alfa); // './sprites/alfa/icons.svg'
 ### Dynamic Icon Loading
 
 ```javascript
-// Helper function to create icon element
 function createIcon(theme, iconName, options = {}) {
   const { width = 24, height = 24, title, color } = options;
 
@@ -241,10 +196,7 @@ function createIcon(theme, iconName, options = {}) {
   }
 
   if (title) {
-    const titleElement = document.createElementNS(
-      'http://www.w3.org/2000/svg',
-      'title'
-    );
+    const titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title');
     titleElement.textContent = title;
     svg.appendChild(titleElement);
   } else {
@@ -291,251 +243,101 @@ document.body.appendChild(icon);
 ### Best Practices
 
 ```html
-<!-- ✅ GOOD: Informative icon with proper accessibility -->
+<!-- Informative icon with proper accessibility -->
 <button>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="20"
-    height="20"
-    aria-labelledby="close-title"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-labelledby="close-title">
     <title id="close-title">Close dialog</title>
-    <use href="icons/alfa/icons.svg#close"></use>
+    <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#close"></use>
   </svg>
 </button>
 
-<!-- ✅ GOOD: Decorative icon paired with text -->
+<!-- Decorative icon paired with text -->
 <button>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="20"
-    height="20"
-    aria-hidden="true"
-  >
-    <use href="icons/alfa/icons.svg#add"></use>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true">
+    <use href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#add"></use>
   </svg>
   Add Item
 </button>
-
-<!-- ❌ BAD: Informative icon without accessibility support -->
-<button>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
-    <use href="icons/alfa/icons.svg#delete"></use>
-  </svg>
-</button>
-
-<!-- ❌ BAD: Standalone decorative icon -->
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
-  <use href="icons/alfa/icons.svg#arrow-right"></use>
-</svg>
 ```
 
 ### Keyboard Navigation
 
-Icons themselves are not interactive. Always wrap icons in interactive elements like:
+Icons themselves are not interactive. Always wrap icons in interactive elements:
 
 - `<button>` for actions
 - `<a>` for navigation
 - Ensure interactive elements are keyboard accessible with proper focus styles
+- Icon-only interactive elements MUST have `aria-label` for an accessible name
 
-## Common Patterns
+### Touch Target Size
 
-### Icon Button
-
-```html
-<brick-button-v9 data-variant="ghost" data-shape="circle">
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    aria-labelledby="settings-title"
-  >
-    <title id="settings-title">Open settings</title>
-    <use
-      href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#settings-fill"
-    ></use>
-  </svg>
-</brick-button-v9>
-```
-
-### Status Indicator with Icon
-
-```html
-<div
-  class="status-success"
-  style="display: flex; align-items: center; gap: 8px; color: #00aa00;"
->
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="20"
-    height="20"
-    aria-hidden="true"
-  >
-    <use
-      href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#check-circle"
-    ></use>
-  </svg>
-  <span>Operation completed successfully</span>
-</div>
-```
-
-### Navigation Menu Item
-
-```html
-<a href="/profile" style="display: flex; align-items: center; gap: 12px;">
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    aria-hidden="true"
-  >
-    <use
-      href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/nettavisen/icons.svg#user"
-    ></use>
-  </svg>
-  <span>My Profile</span>
-</a>
-```
-
-### Media Controls
-
-```html
-<div class="media-controls" style="display: flex; gap: 16px;">
-  <button aria-label="Play video">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="32"
-      height="32"
-      aria-hidden="true"
-    >
-      <use
-        href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alt/icons.svg#play"
-      ></use>
-    </svg>
-  </button>
-  <button aria-label="Mute audio">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="32"
-      height="32"
-      aria-hidden="true"
-    >
-      <use
-        href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alt/icons.svg#volume-on"
-      ></use>
-    </svg>
-  </button>
-</div>
-```
-
-### Social Media Links
-
-```html
-<nav aria-label="Social media" style="display: flex; gap: 16px;">
-  <a href="https://facebook.com/example" aria-label="Facebook">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      aria-hidden="true"
-    >
-      <use
-        href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/charlie/icons.svg#facebook"
-      ></use>
-    </svg>
-  </a>
-  <a href="https://twitter.com/example" aria-label="Twitter">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      aria-hidden="true"
-    >
-      <use
-        href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/charlie/icons.svg#twitter"
-      ></use>
-    </svg>
-  </a>
-  <a href="https://instagram.com/example" aria-label="Instagram">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      aria-hidden="true"
-    >
-      <use
-        href="https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/charlie/icons.svg#instagram"
-      ></use>
-    </svg>
-  </a>
-</nav>
-```
+Interactive elements containing icons must meet minimum 24x24 pixel touch target (WCAG 2.5.5). Recommended minimum is 40px (2.5rem).
 
 ## Technical Details
 
-- **Package Name**: @amedia/brick-icons
-- **Distribution**: CDN via Eik (https://assets.acdn.no)
+- **Package version**: `2.2.7`
+- **Package name**: `@amedia/brick-icons`
+- **Distribution**: CDN via Eik (`https://assets.acdn.no`)
 - **Source**: Figma (synced via Figmagic)
-- **Format**: SVG sprite sheets
+- **Format**: SVG sprite sheets (theme icons) + individual SVG files (external brands)
 - **Themes**: alfa, bravo, charlie, nettavisen, alt
-- **Build Tools**: Figmagic, svg-sprite, svgson
-- **Dependencies**: None (icons are static assets)
+- **Build tools**: Figmagic, svg-sprite, svgson
+- **Dependencies**: figmagic, svg-sprite, svgson, dotenv (build-time only; no runtime dependencies)
 
 ### CDN URL Structure
 
+**Theme sprite icons** (use major version alias):
+
 ```
 https://assets.acdn.no/pkg/@amedia/brick-icons/v{major}/icons/{theme}/icons.svg#{icon-name}
 ```
 
-Example:
+**External brand logos** (use full semver or major version):
 
 ```
-https://assets.acdn.no/pkg/@amedia/brick-icons/v2/icons/alfa/icons.svg#checkmark
+https://assets.acdn.no/pkg/@amedia/brick-icons/{version}/brands-external/{brand-name}.svg
 ```
 
 ### Version Aliasing
 
 The package uses Eik version aliasing:
 
-- `v1` → Latest 1.x.x version
-- `v2` → Latest 2.x.x version (current)
-
-This allows automatic updates within major versions without changing URLs.
+- `v2` points to the latest 2.x.x version (current major)
+- Use `v2` in sprite URLs for automatic patch/minor updates without URL changes
+- For brands-external, either the full version or `v2` alias can be used
 
 ## Important Notes
 
-### Icon Updates
+### No Template Submodule
 
-Icons are automatically synced from Figma. To update icons:
+This package does NOT have a `/template` submodule for SSR. It provides static SVG assets served from a CDN. There is no render function to import.
 
-1. Ensure you have Figma API access token
-2. Run: `npm run build:svg && npm run build:altered-svg && npm run build:sprite`
-3. Create changeset: `npx changeset`
-4. Commit and push changes
-5. After merge, flush Varnish cache if needed
+### Icon Availability Varies by Theme
+
+Not all icons are available in all themes. The alt theme has a distinctly different icon set from alfa/bravo/charlie. Check the sprite sheets or Figma source files to confirm icon availability for your theme.
+
+### External Brands Are Separate from Sprites
+
+External brand logos (in `brands-external/`) are individual SVG files, NOT part of the sprite sheets. They use a different URL path and may require a `viewBox` attribute on the `<svg>` element.
 
 ### Color Customization
 
-Most icons use `currentColor` for fill/stroke, allowing easy color changes via CSS:
+Most icons use `currentColor` for fill/stroke, so setting `color` in CSS changes the icon color. Some multi-colored brand icons and certain theme-specific icons (especially in the alt theme) may have fixed colors that do not respond to `currentColor`.
 
-```html
-<svg
-  style="color: #ff0000;"
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
->
-  <use href="icons/alfa/icons.svg#heart"></use>
-</svg>
-```
+### Updating Icons
 
-Some multi-colored brand icons (like social media logos) may have fixed colors.
+Icons are synced from Figma. To update:
+
+1. Set up a Figma API access token in `.env` (in `packages/brick-icons/`)
+2. Run: `npm run build:icons` (which runs build:svg, build:altered-svg, build:sprite, and build:brands-external)
+3. Create changeset: `npx changeset`
+4. Commit and push
+5. After merge, flush Varnish cache if needed
 
 ### Performance
 
-- Icons are served from CDN with aggressive caching
-- Sprite sheets bundle all icons per theme in single HTTP request
-- Use version aliases (v2) for automatic updates within major versions
+- Sprite sheets bundle all icons per theme into a single HTTP request
+- Use version aliases (`v2`) for automatic updates within major versions
 - Consider preloading sprite sheets for critical icons:
 
 ```html
@@ -547,24 +349,18 @@ Some multi-colored brand icons (like social media logos) may have fixed colors.
 />
 ```
 
-### Browser Compatibility
-
-SVG sprites with `<use>` elements are supported in all modern browsers. For legacy browser support, consider using polyfills like svg4everybody.
-
-### Icon Availability
-
-Not all icons are available in all themes. Check the Figma source files or sprite sheets to confirm icon availability for your theme. The build process syncs exactly what's in Figma for each theme.
-
-### Non-Interactive Elements
-
-Icons are purely presentational elements and should NOT be interactive on their own. Always wrap icons in interactive elements like `<button>` or `<a>` tags when user interaction is needed.
-
-## Version
+### Icons Are Non-Interactive
 
-Current version: 2.1.0
+Icons are purely presentational elements and MUST NOT be interactive on their own. Always wrap icons in semantic interactive elements (`<button>`, `<a>`) when user interaction is needed.
 
-Recent updates:
+## Version History (since 2.1.0)
 
+- **2.2.7**: Added icons for "min side 2.0": bolt, calendar, download, envelope-send, exchange, history, hourglass, invoice, sending-success, stop-sending, trophy, user-exclamation
+- **2.2.6**: Dependency update (esbuild); target changed from safari14 to safari15
+- **2.2.5**: Synced icons with Figma for abo/minside
+- **2.2.4**: Updated icons from Figma Graphics
+- **2.2.3**: Synced icons for abo team (Jan 2026)
+- **2.2.2**: Refined package.json file inclusions; removed redundant default export
+- **2.2.1**: Added new brick icons
+- **2.2.0**: Added `brands-external` collection with SVGs from Figma file "brands-external"
 - **2.1.0**: New icons: gift, camera, settings-outline
-- **2.0.4**: Synced icons
-- **2.0.0**: Removed CommonJS support (ESM only)