Проект на Vue

Полное руководство по установке и использованию иконок Битрикс24 в приложениях Vue.

Установка

Добавление в проект Vue

Установите пакет иконок Bitrix24 с помощью предпочитаемого вами менеджера пакетов:

pnpm add @bitrix24/b24icons-vue

yarn add @bitrix24/b24icons-vue

npm install @bitrix24/b24icons-vue

bun add @bitrix24/b24icons-vue

Примеры использования

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

Импортируйте иконки как компоненты Vue.

Common-service::Bitrix24Icon

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

<template>
  <B24Card
    class="shadow-md"
    :b24ui="{ body: 'flex flex-row flex-nowrap items-center justify-center' }"
  >
    <template #header>
      <ProseP small class="mb-0">
        Common-service::Bitrix24Icon
      </ProseP>
    </template>
    <Bitrix24Icon class="size-25 text-blue-500 dark:text-blue-900" />
  </B24Card>
</template>

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

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

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

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

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

Button::TariffIcon

Main::CopilotAiIcon

Main::AiIcon

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

<template>
  <B24PageColumns>
    <B24Card
      class="shadow-md"
      :b24ui="{ body: 'flex flex-row flex-nowrap items-center justify-center' }"
    >
      <template #header>
        <ProseP small class="mb-0">
          Button::TariffIcon
        </ProseP>
      </template>
      <B24Icon name="Button::TariffIcon" class="size-25 text-blue-500 dark:text-blue-900" />
    </B24Card>
    <B24Card
      class="shadow-md"
      :b24ui="{ body: 'flex flex-row flex-nowrap items-center justify-center' }"
    >
      <template #header>
        <ProseP small class="mb-0">
          Main::CopilotAiIcon
        </ProseP>
      </template>
      <B24Icon name="Main::CopilotAiIcon" class="size-25 text-blue-500 dark:text-blue-900" />
    </B24Card>
    <B24Card
      class="shadow-md"
      :b24ui="{ body: 'flex flex-row flex-nowrap items-center justify-center' }"
    >
      <template #header>
        <ProseP small class="mb-0">
          Main::AiIcon
        </ProseP>
      </template>
      <B24Icon name="Main::AiIcon" class="size-25 text-blue-500 dark:text-blue-900" />
    </B24Card>
  </B24PageColumns>
</template>

Введение

Библиотека содержит SVG-иконки для Битрикс24.

Проект на Nuxt

Полное руководство по установке и использованию иконок Битрикс24 в приложениях Nuxt