Gavia UIv1.0.0

Иконки

Иконки из встроенного SVG-каталога: имена, размеры, currentColor и доступные подписи.

Имя и размеры

Выберите имя и сравните размеры. SVG использует viewBox 0 0 24 24; currentColor берётся из ближайшего контейнера.

Выбрано: folder · 24 px

16 px
20 px
24 px
32 px
48 px

SVG наследует currentColor. Установите color на контейнере или действии; размер в пикселях передаётся числом.

Vue SFC · интерактивный выбор иконки
<script setup lang="ts">
const name = defineModel<WlIconName>("name", { default: "folder" });
const size = defineModel<number>("size", { default: 24 });
import { WL_ICON_NAMES, WlIcon, type WlIconName, WlSelect } from "gavia-ui";
const comparisonSizes = [16, 20, 24, 32, 48];
function chooseName(value: unknown): void {
  if (typeof value === "string" && (WL_ICON_NAMES as readonly string[]).includes(value)) name.value = value as WlIconName;
}
function chooseSize(value: unknown): void {
  if (typeof value === "number" && comparisonSizes.includes(value)) size.value = value;
}
</script>

<template>
  <section class="icon-playground wl-stack" data-space="lg">
    <div class="wl-grid" data-space="md">
      <div class="wl-stack" data-space="xs">
        <label for="asset-icon-name" class="wl-text-label">{{ "Имя иконки" }}</label>
        <WlSelect
          id="asset-icon-name"
          :model-value="name"
          :options="[...WL_ICON_NAMES]"
          aria-label="Имя иконки"
          @update:model-value="chooseName"
        />
      </div>
      <div class="wl-stack" data-space="xs">
        <label for="asset-icon-size" class="wl-text-label">{{ "Размер иконки" }}</label>
        <WlSelect
          id="asset-icon-size"
          :model-value="size"
          :options="comparisonSizes"
          aria-label="Размер иконки"
          @update:model-value="chooseSize"
        />
      </div>
    </div>
    <div class="icon-playground-selected wl-inline" data-space="md">
      <span role="img" :aria-label="'Иконка ' + name + ', ' + size + ' px'"><WlIcon :name="name" :size="size" /></span>
      <p class="wl-text-body" role="status">{{ "Выбрано:" }} {{ name }} · {{ size }} px</p>
    </div>
    <div class="icon-playground-comparison" aria-label="Сравнение размеров">
      <figure
        v-for="comparisonSize in comparisonSizes"
        :key="comparisonSize"
        class="icon-playground-sample"
        :data-icon-comparison-size="comparisonSize"
      >
        <WlIcon :name="name" :size="comparisonSize" /><figcaption class="wl-text-small">{{ comparisonSize }} px</figcaption>
      </figure>
    </div>
    <p class="wl-text-small wl-text-muted">{{ "SVG наследует currentColor. Установите color на контейнере или действии; размер в пикселях передаётся числом." }}</p>
  </section>
</template>

<style scoped>
.icon-playground { min-width: 0; }
.icon-playground-selected {
  min-height: 80px;
  padding: var(--wl-space-lg);
  background: var(--wl-bg-soft);
  border-radius: var(--wl-corner-control);
  color: var(--wl-text-accent);
}
.icon-playground-selected p { color: var(--wl-text); }
.icon-playground-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 80px), 1fr));
  gap: var(--wl-space-sm);
}
.icon-playground-sample {
  margin: 0;
  min-width: 0;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wl-space-md);
  border: 1px solid var(--wl-border);
  border-radius: var(--wl-corner-control);
  color: var(--wl-text);
}
</style>

Каталог иконок

Показано: 113 / 113 · Выбрано: folder · Размер каталога: 24 px

Иконки и доступность

  • WlIcon по умолчанию декоративный: SVG имеет aria-hidden="true". Видимая подпись действия или объекта передаёт смысл.
  • Самостоятельному изображению задайте доступное имя на контейнере с role="img". Если имя задаётся самому SVG, явно передайте aria-hidden="false".
  • У кнопки только с иконкой должно быть доступное имя. WlIconButton принимает aria-label; текстовая кнопка использует свою видимую подпись.

Смысл и действие

Материалы

Объект назван текстом. Иконка рядом декоративная и скрыта от вспомогательных технологий.

Имя контейнера описывает самостоятельное изображение.

Добавлено материалов: 0. Уведомления ещё не открывали.

Vue SFC · пример для приложения
<script setup lang="ts">
import { WlButton, WlIcon, WlIconButton } from "gavia-ui";
import { ref } from "vue";
const count = ref(0);
const message = ref("Уведомления ещё не открывали.");
</script>

<template>
  <section class="wl-stack" data-space="lg">
    <div class="wl-inline" data-space="sm">
      <WlIcon name="folder" :size="20" /><span class="wl-text-body">{{ "Материалы" }}</span>
    </div>
    <p class="wl-text-small wl-text-muted">{{ "Объект назван текстом. Иконка рядом декоративная и скрыта от вспомогательных технологий." }}</p>
    <div class="wl-inline" data-space="md">
      <span role="img" aria-label="Защищённое соединение"><WlIcon name="shield" :size="24" /></span>
      <p class="wl-text-small">{{ "Имя контейнера описывает самостоятельное изображение." }}</p>
    </div>
    <div class="wl-inline" data-space="sm">
      <WlButton variant="primary" @click="count++">
        <template #icon><WlIcon name="plus" :size="18" /></template>{{ "Добавить материал" }}
      </WlButton>
      <WlIconButton
        icon="bell"
        aria-label="Открыть уведомления"
        @click="message = 'Уведомления открыты.'"
      />
    </div>
    <p class="wl-text-small" role="status">{{ "Добавлено материалов:" }} {{ count }}. {{ message }}</p>
  </section>
</template>

CSS-размер, синонимы и fallback

Size принимает число в пикселях или CSS-строку. Resolver принимает каноническое имя или синоним, включая прежние pi-name и pi pi-name. При неизвестном имени WlIcon показывает default-слот.

Совместимые имена и резервный знак

CSS-размер: size="1.25rem".

pi pi-pencil → edit. Сохранённое значение приложение меняет отдельно.

Неизвестное имя сохраняет default-слот. Можно показать свой резервный знак.

Vue SFC · пример для приложения
<script setup lang="ts">
import { resolveWlIconName, WlIcon } from "gavia-ui";
const legacyName = "pi pi-pencil";
const missingName = "my-missing-icon";
</script>

<template>
  <section class="wl-stack" data-space="lg">
    <div class="wl-inline" data-space="md">
      <WlIcon name="folder" size="1.25rem" />
      <p class="wl-text-small">{{ "CSS-размер:" }} <code>size="1.25rem"</code>.</p>
    </div>
    <div class="wl-inline" data-space="md">
      <WlIcon :name="legacyName" :size="20" />
      <p class="wl-text-small">
        <code>{{ legacyName }}</code> → <code>{{ resolveWlIconName(legacyName) }}</code>{{
          ". Сохранённое значение приложение меняет отдельно."
        }}
      </p>
    </div>
    <div class="wl-inline" data-space="md">
      <span role="img" aria-label="Резервный знак">
        <WlIcon :name="missingName" :size="24"><span class="icon-compatibility-fallback" aria-hidden="true">?</span></WlIcon>
      </span>
      <p class="wl-text-small">{{ "Неизвестное имя сохраняет default-слот. Можно показать свой резервный знак." }}</p>
    </div>
  </section>
</template>

<style scoped>
.icon-compatibility-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px solid var(--wl-border);
  border-radius: var(--wl-corner-control);
  font: var(--wl-type-label-weight) var(--wl-type-small-size)/1 var(--wl-font);
}
</style>

Добавление SVG

Исходники находятся в packages/ui-kit/icons/<name>.svg. Подготовьте новые иконки в общем стиле; pnpm icons:sync проверит SVG и обновит реестр, pnpm icons:check проверит актуальность.

Разборчивость проверяйте на 16, 20 и 24 px во всех темах. Размер и цвет задаёт компонент; внешние ресурсы и обработчики в SVG не используются.

Как подготовить и добавить SVG