Icon

Accessible, unstyled SVG icon primitive.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { Icon } from "@vizejs/ui/icon";

Or copy the source into your project with vize lib pull icon (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Meaningful SVG icon named by its title next to a decorative icon hidden from assistive technology. -->
<script setup lang="ts">
import { Icon } from "@vizejs/ui/icon";
</script>

<template>
  <p>
    <Icon title="Warning" size="sm">
      <path d="M12 3 2 21h20L12 3Z" />
      <path d="M12 10v5" />
      <path d="M12 18h.01" />
    </Icon>
    Your trial ends in three days.
  </p>
  <p>
    <Icon aria-hidden>
      <path d="M5 12h14" />
      <path d="m13 6 6 6-6 6" />
    </Icon>
    Continue to billing
  </p>
</template>

API

Icon

Source: src/families/layout/icon/icon.vue

Props

Slots

Exposed

Behavior