Nuxt Project

Complete guide for installing and using Bitrix24 icons in Nuxt applications.

Installation

We are still updating this page. Some data may be missing here — we will complete it shortly.

Adding to Nuxt Project

Install the Bitrix24 Icons package using your preferred package manager:

pnpm add @bitrix24/b24icons-nuxt

yarn add @bitrix24/b24icons-nuxt

npm install @bitrix24/b24icons-nuxt

bun add @bitrix24/b24icons-nuxt

Add the Bitrix24 Icons module in your `nuxt.config.ts`

nuxt.config.ts

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

Usage Examples

Basic Usage

Import icons as Vue-components.

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>

Generic Icon Component

Use the B24Icon component for easy access to icons.

The component uses dynamic imports via import() to load icons as needed.

This does not break the tree-shaking principle because tree-shaking works with static imports, while dynamic imports are used for load optimization, loading only the necessary parts of the code when they are needed.

Specify the full icon name with the name parameter, e.g., 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 Project

Complete guide for installing and using Bitrix24 icons in Vue applications.