# Framework and Platform Integration

## Framework-neutral contract

Define an icon component contract around:

- semantic name;
- decorative or exposed state;
- accessible label when the component owns naming;
- size and optical size;
- color role;
- direction or mirroring policy;
- state and animation;
- test identifier only when necessary.

Avoid exposing raw paths, vendor class names, or private-use codepoints to most consumers.

## React, Vue, Angular, and Svelte

- Tree-shake only when package structure and bundler prove it works.
- Avoid importing an entire icon namespace for a few symbols.
- Generate stable component names and keys.
- Keep SVG IDs unique across repeated component instances.
- Ensure SSR output matches hydrated markup.
- Do not inject untrusted SVG through raw HTML APIs.
- Make the interactive parent own focus and accessible naming.

## Web Components and Shadow DOM

Decide whether icons are internal implementation or slotted content. Expose theme hooks through documented custom properties or `part`, not private selectors. Verify accessible name computation across the shadow boundary.

## Bootstrap

Bootstrap Icons can be used as inline SVG, external images, sprites, or CSS. Prefer an adapter that hides delivery details. For legacy Glyphicons or Font Awesome classes, maintain a semantic alias map and migrate component by component.

## Server-rendered templates

Create helpers or tags that:

- allow only approved semantic names;
- escape labels;
- select hashed asset URLs;
- render decorative defaults safely;
- prevent arbitrary file paths or raw SVG injection;
- work without client JavaScript.

Support ColdFusion, PHP, JSP, Razor, and similar environments through small adapters rather than duplicated markup fragments.

## Native wrappers and documents

Do not assume web SVG works identically in native views, email, PDF, Office, or print. Define an export strategy with permitted formats, embedded fonts, color profiles, alt text, and fallback assets.