Создание кастомных иконок

Carbon Components Svelte предоставляет удобный способ интеграции иконок в интерфейс, поддерживая как стандартные наборы иконок IBM Carbon Design System, так и пользовательские SVG. Для создания кастомных иконок важно понимать структуру компонента Icon и возможности передачи параметров.

Стандартная структура компонента иконки выглядит следующим образом:

<script>
  import { Icon } from 'carbon-components-svelte';
  import MyCustomIcon from './MyCustomIcon.svelte';
</script>

<Icon this={MyCustomIcon} size="24" title="Custom Icon" />

Здесь ключевым моментом является использование свойства this, которое позволяет подставлять любой компонент, реализующий SVG, вместо стандартной иконки. Это открывает возможность создания уникальных визуальных элементов без ограничения стандартной библиотеки.

Создание собственного SVG-компонента

Для начала необходимо создать компонент на основе SVG. Основные рекомендации:

  1. Использовать viewBox для масштабирования Атрибут viewBox обеспечивает корректное масштабирование иконки независимо от размера, передаваемого через size.
<script>
  export let size = "24";
  export let title = "";
</script>

<svg
  xmlns="http://www.w3.org/2000/svg"
  width={size}
  height={size}
  viewBox="0 0 24 24"
  aria-label={title}
  role="img"
>
  <path d="M12 2L15 8H9L12 2Z" />
</svg>

  1. Добавление доступности (ARIA) Свойства aria-label и role="img" обеспечивают поддержку скринридеров и соответствие стандартам доступности.

  2. Передача динамических свойств Любые атрибуты SVG, такие как fill, stroke или class, можно передавать через пропсы для изменения внешнего вида иконки без редактирования исходного файла.

<svg
  {size}
  {title}
  fill="currentColor"
  stroke="none"
>

Интеграция с компонентом Icon

Компонент Icon из Carbon Components Svelte позволяет не только отображать иконку, но и управлять размером, контекстной подсказкой и состояниями:

<Icon this={MyCustomIcon} size="32" title="Example Icon" class="my-custom-class" />
  • size — задаёт размер иконки в пикселях.
  • title — текст подсказки для доступности.
  • class — позволяет применять CSS-стили, включая анимацию и эффекты при наведении.

Кастомизация через CSS

Использование CSS дает гибкость при создании кастомных иконок:

.my-custom-class {
  transition: transform 0.3s ease;
}

.my-custom-class:hover {
  transform: scale(1.2);
  fill: #0f62fe;
}

С помощью такого подхода можно создавать интерактивные иконки, которые реагируют на действия пользователя, сохраняя совместимость с остальной системой Carbon.

Поддержка реактивности Svelte

Иконки в Svelte могут быть реактивными, что позволяет изменять их свойства в зависимости от состояния приложения:

<script>
  import { Icon } from 'carbon-components-svelte';
  import MyCustomIcon from './MyCustomIcon.svelte';

  let isActive = false;
</script>

<Icon
  this={MyCustomIcon}
  size={isActive ? "32" : "24"}
  title="Dynamic Icon"
  class:is-active={isActive}
/>

<button on:click={() => isActive = !isActive}>
  Toggle Icon Size
</button>

В этом примере иконка автоматически изменяет размер при изменении переменной isActive, демонстрируя преимущества реактивной модели Svelte.

Оптимизация и управление пакетами

Для больших проектов рекомендуется:

  • Создавать отдельные файлы для каждой кастомной иконки Это упрощает управление иконками и уменьшает размер бандла, так как можно импортировать только необходимые компоненты.

  • Использовать tree-shaking Carbon Components Svelte поддерживает модульный импорт, что предотвращает включение ненужных иконок в сборку:

import { Add16, Close16 } from 'carbon-icons-svelte';
  • Минимизировать SVG Для повышения производительности и снижения веса страниц необходимо оптимизировать SVG с помощью инструментов вроде SVGO.

Работа с анимацией SVG

Для создания динамических эффектов используется сочетание CSS и реактивных переменных:

<svg width="24" height="24" viewBox="0 0 24 24" class:active={isActive}>
  <circle cx="12" cy="12" r="10" stroke="black" fill="none" stroke-width="2">
    <animate attributeName="r" from="10" to="12" dur="0.3s" begin="mouseover" fill="freeze" />
  </circle>
</svg>

Это позволяет создавать интерактивные элементы интерфейса без подключения дополнительных библиотек.

Хотите, я могу сразу продолжить и подробно расписать создание библиотеки кастомных иконок с компонентами Svelte и динамической загрузкой, что идеально подходит для крупных проектов?

Оглавление