Vue

@bitrix24/b24icons-vue library for Vue 3.

Installation

Install via npm.

npm

$ npm i @bitrix24/b24icons-vue

Usage

The package supports ECMAScript and tree-shaking.

Import icons as Vue-components. Only used icons are included in the build.

Example

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>

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.

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>