Vue

Use the icons in Vue templates with the CSS classes or a small sprite component.

as Markdown, for notes or an AI chat

There is no Vue package, and none is needed. Pick one of three ways, depending on how much you want in your bundle.

CSS classes#

The lightest option. Load the stylesheet once (from the CDN or your copy of the kit) in index.html:

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hubtoolify/icons@2.0.3/css/hubtoolify-icons.min.css">

Then bind classes in any template:

Vue

<script setup>
import { ref } from 'vue';
const filled = ref(false);
</script>

<template>
  <button type="button" :aria-pressed="filled" aria-label="Favourite" @click="filled = !filled">
    <i :class="['hti', filled ? 'hti-solid' : 'hti-line', 'hti-heart']" aria-hidden="true" />
  </button>
</template>

A sprite component#

Inline a sprite once (see Sprites) and wrap it in a tiny component:

HtiIcon.vue

<!-- HtiIcon.vue -->
<script setup>
defineProps({
  name: { type: String, required: true },
  size: { type: Number, default: 24 },
});
</script>

<template>
  <svg :width="size" :height="size" aria-hidden="true"><use :href="'#hti-' + name" /></svg>
</template>

Vue

<HtiIcon name="calendar" :size="20" />

Inline SVG from npm#

When you want real SVG in the DOM with no sprite to load, read the markup from @hubtoolify/icons-svg. The markup comes from the package, never from user input, so v-html is safe here:

Terminal

npm install @hubtoolify/icons-svg

HtiSvg.vue

<script setup>
import { computed } from 'vue';
import { getIcon } from '@hubtoolify/icons-svg';

const props = defineProps({ name: String, variant: { type: String, default: 'line' } });
const svg = computed(() => getIcon(props.name, props.variant));
</script>

<template>
  <span class="hti-inline" aria-hidden="true" v-html="svg" />
</template>

This imports the whole catalogue. For large apps, prefer the classes or the sprite.