Vue Project

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

Installation

Adding to Vue Project

Install the Bitrix24 Icons package using your preferred package manager:

pnpm add @bitrix24/b24icons-vue

yarn add @bitrix24/b24icons-vue

npm install @bitrix24/b24icons-vue

bun add @bitrix24/b24icons-vue

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>

Introduction

The library contains SVG icons for Bitrix24.

Nuxt Project

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