-
- {@html def.svg.replace('class="', `class="w100 h-auto wmx100 ${label === 'Spots' ? 'native' : ''} `)}
+
+
+
- {/if}
- {/snippet}
-
- {@render section('Icons', filteredIcons)}
- {@render section('Spots', filteredSpots)}
-
+
-
+ {#each variants as variant (variant.key)}
+
+
{variant.key}
+
+ {#each variant.values as val (val)}
+ {@const isActive = selectedProps[variant.key] === val}
+ {@const compatible = isCompatible(variant.key, val)}
+
+
+ {/each}
+
+
+ {/each}
+
+
+
Usage
+
+
+ {#each ["Svelte", ".NET", "SVG"] as label (label)}
+ activeCodeTab = label}
+ />
+ {/each}
+
+
+ {#if activeCodeTab === 'Svelte'}
+
If you are working in a Svelte project, you can use the Icon component to render the asset as an svg element with the appropriate classes and attributes (docs).
+
+
+ import { Icon } from '@stackoverflow/stacks-svelte';
+
+
+
Import this asset
+
+
+ import { {selected?.isSpot ? 'Spot' : 'Icon'}{exportName} } from "@stackoverflow/stacks-icons/{selected?.isSpot ? 'spots' : 'icons'}";
+
+
+
Render this asset
+
+
+ <Icon src={{selected?.isSpot ? 'Spot' : 'Icon'}{exportName}} />
+
+ {/if}
+ {#if activeCodeTab === '.NET'}
+
If you’re working in a .NET project, we have a helper that can be called with @Svg. and the icon name. By default, any icon will inherit the text color of the parent element.
+
+
Add the helper
+
+
+ @inject IModuleSvg Svg
+
+
+
Render the asset
+
+
+ @Svg.{selectedVariant.key}
+
+
+
Add CSS classes as a string:
+
+
+ @Svg.{selected?.isSpot ? 'Spot' : ''}{selectedVariant.key}.With("native fc-black-300")
+
+
+
You can also add a title prop, which also removes aria-hidden.
+
+
+ @Svg.{selected?.isSpot ? 'Spot' : ''}{selectedVariant.key}.With(cssClass: "fc-danger", title: "foo")
+
+ {/if}
+ {#if activeCodeTab === 'SVG'}
+
+
+
+ {/if}
+
+
+
+ Asset last updated:
+
+
+ {:else}
+
+
+
Inspect an asset
+
Pick an icon or spot from the grid to preview its variants, copy the code, and open it in Figma.
+
+ {/if}
+
+