Icon

When to use it

Use the Icon component when a Vue application needs a shared UI-framework icon. The component references the generated SVG sprite, so SVG path data is not bundled into application JavaScript.

For .NET/Razor or plain HTML, use the same sprite directly with .c-icon.

What it looks like

Code examples

Vue

<script setup>
import { Icon } from '@tickster/ui-framework/library.mjs';
</script>

<template>
    <Icon name="copy" />
    <Icon name="warning" size="20x20" />
    <Icon name="trash" label="Delete" />
</template>

Direct import

<script setup>
import Icon from '@tickster/ui-framework/components/Icon.mjs';
</script>

<template>
    <Icon name="search" />
</template>

App default path

import UiFramework from '@tickster/ui-framework/library.mjs';

app.use(UiFramework, {
    iconSpritePath: '/assets/vendor/ui-framework/img/sprite.symbol.svg',
});

Razor / HTML

<svg class="c-icon" aria-hidden="true" focusable="false" fill="currentColor">
    <use
        href="/assets/vendor/ui-framework/symbol/svg/sprite.symbol.svg#check"
        xlink:href="/assets/vendor/ui-framework/symbol/svg/sprite.symbol.svg#check"
    ></use>
</svg>

Props

Prop	Default	Description
name	required	Icon id from the generated UI-framework sprite.
size	24	Number, CSS length, or Promote-style pair such as 20x20.
label	''	Accessible label for meaningful icons.
title	''	Compatibility alias for label.
spritePath	/assets/vendor/ui-framework/symbol/svg/sprite.symbol.svg	Override for applications with another public asset path.
fill	currentColor	Optional SVG presentation override. Prefer CSS color for normal UI icons.
stroke	null	Optional SVG presentation override. Prefer CSS color for normal UI icons.

Accessibility

Icons are decorative by default and render with aria-hidden="true". Add label when the icon itself communicates meaning that is not already present in nearby text.

Color

Standard UI icons should follow currentColor, so light and dark mode should be handled by the text color of the surrounding UI. Do not duplicate icons for light and dark mode unless the artwork itself changes.