Vue

Библиотека @bitrix24/b24icons-vue для Vue 3.

Установка

Установите через npm.

npm

$ npm i @bitrix24/b24icons-vue

Использование

Пакет поддерживает ECMAScript и tree-shaking.

Импортируйте иконки как Vue-компоненты. В сборку включаются только используемые иконки.

Пример

Common-service::Bitrix24Icon

SomeComponent.vue

<script setup>
import Bitrix24Icon from '@bitrix24/b24icons-vue/common-service/Bitrix24Icon'
</script>

<template>
	<div class="rounded ...">
		<Bitrix24Icon class="size-15 text-blue-500 ..." />
	</div>
</template>

Универсальный компонент иконок

Используйте компонент B24Icon для удобного доступа к иконкам.

Компонент использует динамический импорт через import() для загрузки иконок по мере необходимости.

Это не нарушает принцип tree-shaking, так как tree-shaking работает со статическим импортом, а динамическиё импорт используется для оптимизации загрузки, когда загружаются только необходимые части кода.

Укажите полное имя иконки с помощью параметра name, например, Main::CopilotAiIcon.

Main::CopilotAiIcon

Button::TariffIcon

Main::AiIcon

SomeComponent.vue

<script setup>
import { B24Icon } from '@bitrix24/b24icons-vue'
</script>

<template>
	<div class="rounded ...">
		<B24Icon name="Button::TariffIcon" class="size-15 ..." />
	</div>
	<div class="rounded ...">
		<B24Icon name="Main::CopilotAiIcon" class="size-15 ..." />
	</div>
	<div class="rounded ...">
		<B24Icon name="Main::AiIcon" class="size-15 ..." />
	</div>
</template>