Usage
Bitrix24 UI automatically registers the @bitrix24/b24icons module for you, so there's no additional setup required.
Icon component
They are very easy to use:
You can use any from the https://bitrix24.github.io/b24icons/icons/ collection.
Component props
Some components also have an icon prop to display an icon, like the Button for example:
{
"wait": "Loading client-side content..."
}Set of icons
The interface uses the following set of icons
src/runtime/dictionary/icons.ts
import ArrowToTheLeftIcon from '@bitrix24/b24icons-vue/actions/ArrowToTheLeftIcon'
import ArrowToTheRightIcon from '@bitrix24/b24icons-vue/actions/ArrowToTheRightIcon'
import CheckIcon from '@bitrix24/b24icons-vue/outline/CheckLIcon'
import ChevronTopLIcon from '@bitrix24/b24icons-vue/outline/ChevronTopLIcon'
import ChevronToTheLeftIcon from '@bitrix24/b24icons-vue/outline/ChevronLeftLIcon'
import ChevronToTheRightIcon from '@bitrix24/b24icons-vue/outline/ChevronRightLIcon'
import DoubleShevronsRightIcon from '@bitrix24/b24icons-vue/actions/DoubleShevronsRightIcon'
import DoubleShevronsLeftIcon from '@bitrix24/b24icons-vue/actions/DoubleShevronsLeftIcon'
import CrossMIcon from '@bitrix24/b24icons-vue/outline/CrossMIcon'
import DotsIcon from '@bitrix24/b24icons-vue/button/DotsIcon'
import OpenIn50Icon from '@bitrix24/b24icons-vue/actions/OpenIn50Icon'
import Refresh6Icon from '@bitrix24/b24icons-vue/actions/Refresh6Icon'
import Minus30Icon from '@bitrix24/b24icons-vue/actions/Minus30Icon'
import Plus30Icon from '@bitrix24/b24icons-vue/actions/Plus30Icon'
import Search2Icon from '@bitrix24/b24icons-vue/main/Search2Icon'
import LoaderWaitIcon from '@bitrix24/b24icons-vue/animated/LoaderWaitIcon'
import ChevronDownLIcon from '@bitrix24/b24icons-vue/outline/ChevronDownLIcon'
import ScreenIcon from '@bitrix24/b24icons-vue/outline/ScreenIcon'
import SunIconAir from '@bitrix24/b24icons-vue/outline/SunIcon'
import MoonIconAir from '@bitrix24/b24icons-vue/outline/MoonIcon'
import TagIcon from '@bitrix24/b24icons-vue/outline/TagIcon'
import InfoCircleIcon from '@bitrix24/b24icons-vue/outline/InfoCircleIcon'
import IdeaLampIcon from '@bitrix24/b24icons-vue/outline/IdeaLampIcon'
import WarningIcon from '@bitrix24/b24icons-vue/main/WarningIcon'
import AlertIcon from '@bitrix24/b24icons-vue/outline/AlertIcon'
import CopyIcon from '@bitrix24/b24icons-vue/outline/CopyIcon'
import CircleCheckIcon from '@bitrix24/b24icons-vue/outline/CircleCheckIcon'
import FileIcon from '@bitrix24/b24icons-vue/outline/FileIcon'
import UploadFileIcon from '@bitrix24/b24icons-vue/outline/UploadFileIcon'
import ArrowDownLIcon from '@bitrix24/b24icons-vue/outline/ArrowDownLIcon'
import ArrowTopLIcon from '@bitrix24/b24icons-vue/outline/ArrowTopLIcon'
import StopLIcon from '@bitrix24/b24icons-vue/outline/StopLIcon'
import RefreshIcon from '@bitrix24/b24icons-vue/outline/RefreshIcon'
import SendIcon from '@bitrix24/b24icons-vue/main/SendIcon'
export default {
arrowLeft: ArrowToTheLeftIcon,
arrowRight: ArrowToTheRightIcon,
check: CheckIcon,
chevronDoubleLeft: DoubleShevronsLeftIcon,
chevronDoubleRight: DoubleShevronsRightIcon,
chevronDown: ChevronDownLIcon,
chevronLeft: ChevronToTheLeftIcon,
chevronRight: ChevronToTheRightIcon,
chevronUp: ChevronTopLIcon,
close: CrossMIcon,
ellipsis: DotsIcon,
external: OpenIn50Icon,
file: FileIcon,
loading: LoaderWaitIcon,
refresh: Refresh6Icon,
minus: Minus30Icon,
plus: Plus30Icon,
search: Search2Icon,
upload: UploadFileIcon,
system: ScreenIcon,
light: SunIconAir,
dark: MoonIconAir,
hash: TagIcon,
warning: WarningIcon,
tip: IdeaLampIcon,
info: InfoCircleIcon,
caution: AlertIcon,
copyCheck: CircleCheckIcon,
copy: CopyIcon,
imSend: SendIcon,
arrowDown: ArrowDownLIcon,
arrowUp: ArrowTopLIcon,
stop: StopLIcon,
reload: RefreshIcon
}