Icon

Display an icon crafted specifically for Holistics.

<script setup lang="ts">
import { HIcon } from '@holistics/design-system'
</script>

<template>
  <HIcon name="data-model" />
</template>

Examples

Sizes

<script setup lang="ts">
import { HIcon, ICON_SIZES } from '@holistics/design-system'
</script>

<template>
  <div
    class="grid grid-flow-col gap-x-4 gap-y-2"
    style="grid-template-rows: auto 1fr;"
  >
    <template
      v-for="size in ICON_SIZES"
      :key="size"
    >
      <div class="text-center">
        <code>{{ size }}</code>
      </div>

      <HIcon
        name="data-model"
        :size="size"
      />
    </template>
  </div>
</template>

Steps to add a new icon

1. Copy the SVG file:

Place your icon’s SVG file in the ./src/icons directory. Name the file appropriately. The icon’s name will be generated based on its file name and, if applicable, its parent folder (case-sensitive).

Icon naming pattern:

• If the file is in src/icons:
  • Example: src/icons/delete.svg → icon name: delete
• If the file is in a subfolder of src/icons:
  • Example: src/icons/ai/blink.svg → icon name: ai/blink

2. Set the Fill Color for Single-Color icons:

For the single color icon, set the fill attribute to currentColor. For example:

<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M34.9019 10.9678V12.4699C34.9019 13.1551 35.372 13.7479 36.0335 13.8993C44.1162 15.7501 50.143 23.043 50.143 31.7727C50.143 41.9021 42.0279 50.1012 31.9988 50.1012C21.9712 50.1012 13.8546 41.9037 13.8546 31.7727C13.8546 23.0443 19.8804 15.7502 27.9641 13.8993C28.6256 13.7479 29.0957 13.1551 29.0957 12.4699V10.9682C29.0957 10.0388 28.25 9.34059 27.3497 9.53166C17.1168 11.7034 9.44307 20.8989 9.50032 31.8948C9.56564 44.4546 19.6136 54.5264 32.0473 54.4999C44.4507 54.4736 54.4976 44.3083 54.4976 31.7727C54.4976 20.8353 46.8491 11.7028 36.6603 9.53432C35.7549 9.34159 34.9019 10.0332 34.9019 10.9678Z"
    fill="gray"
    fill="currentColor"
  />
</svg>

Single color icon:

Multi colors icon:

3. Generate the icon map:

Run the icon map generation script to include your new icon:

node ./generateIconMap.cjs

4. Bump the package version:

Use pnpm changeset to bump the package version. If you are only adding or updating icons, it is recommended to select a patch version.

API

Pass-through: <span>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
name *	"function" | "cancel" | "copy" | "cut" | "error" | "pause" | "play" | "filter" | "add-block" | "add-circle" | "add-filter" | "add-tag" | "add-user" | "add" | "address-card" | "adhoc-query" | ... 464 more ... | "youtube-red"
size	"xs" | "sm" | "md" | "lg" | "xl" | "2x" | "3x" | "4x" | "onboarding" | 100 = "md"
spin	boolean = false
border	boolean = false

Events

Name	Parameters	Description
@click	any[]

List Icons

Showing 481 icons:

Name

add-block

Copied

Using HIcon component

Using generateIconHtml util