Проект на Nuxt

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

Установка

Мы всё ещё обновляем эту страницу. Некоторые данные могут отсутствовать — мы скоро их добавим.

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

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

pnpm

pnpm add @bitrix24/b24icons-nuxt

yarn

yarn add @bitrix24/b24icons-nuxt

npm

npm install @bitrix24/b24icons-nuxt

bun

bun add @bitrix24/b24icons-nuxt

Добавьте модуль иконок Bitrix24 в ваш `nuxt.config.ts`

nuxt.config.ts

export default defineNuxtConfig({
modules: ['@bitrix24/b24icons-nuxt']
})

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

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

Импортируйте иконки как компоненты 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>

Проект на Vue

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