VeloxUI

Русский

English
O'zbekcha

Русский

English
O'zbekcha

Appearance

Icons ​

На основеVexel Icons

Более 49 000 пиксельно точных SVG-иконок в 60 категориях и 5 стилях. Включены в VeloxUI — дополнительная установка не требуется.

  • 3 формы: Rounded, Standard, Sharp
  • 5 стилей: Stroke, Solid, Duotone, Twotone, Bulk
  • Через CDN: иконки загружаются по требованию и кэшируются в localStorage
  • Tree-shakeable: в бандл попадают только импортированные иконки
  • Типизация: полная поддержка TypeScript

Installation ​

Vexel Icons поставляется как зависимость VeloxUI. При установке VeloxUI вы автоматически получаете иконки:

bash
npm install veloxui
# vexel-icons is included as a dependency

Либо установите иконки отдельно:

bash
npm install vexel-icons

Usage ​

Импортируйте любую иконку по имени и используйте её как Vue-компонент:

vue
<script setup>
import { RoundedStrokeHome01Icon, RoundedSolidStarIcon } from 'vexel-icons'
</script>

<template>
  <RoundedStrokeHome01Icon :size="24" color="currentColor" />
  <RoundedSolidStarIcon :size="20" color="#f59e0b" />
</template>

Icon naming pattern ​

{Shape}{Style}{Name}Icon
PartOptions
ShapeRounded, Standard, Sharp
StyleStroke, Solid, Duotone, Twotone, Bulk
NameИмя иконки (например, Home01, Search01, User)

Пример: RoundedStrokeHome01Icon, SharpSolidLockIcon, StandardDuotoneMailIcon

Props ​

PropTypeDefaultDescription
sizenumber | string24Ширина и высота иконки
colorstring'currentColor'Цвет иконки
stroke-widthnumber | string1.5Толщина обводки (для стиля stroke)

Stroke Style ​

vue
<script setup>
import {
  RoundedStrokeHome01Icon,
  RoundedStrokeSearch01Icon,
  RoundedStrokeSettings01Icon,
  RoundedStrokeUserIcon,
  RoundedStrokeMail01Icon,
  RoundedStrokeLockIcon,
} from 'vexel-icons'
</script>

<template>
  <RoundedStrokeHome01Icon :size="24" />
  <RoundedStrokeSearch01Icon :size="24" />
  <RoundedStrokeSettings01Icon :size="24" />
  <RoundedStrokeUserIcon :size="24" />
  <RoundedStrokeMail01Icon :size="24" />
  <RoundedStrokeLockIcon :size="24" />
</template>

Solid Style ​

vue
<script setup>
import {
  RoundedSolidHome01Icon,
  RoundedSolidStarIcon,
  RoundedSolidLockIcon,
} from 'vexel-icons'
</script>

<template>
  <RoundedSolidHome01Icon :size="24" />
  <RoundedSolidStarIcon :size="24" />
  <RoundedSolidLockIcon :size="24" />
</template>

Duotone Style ​

vue
<script setup>
import {
  RoundedDuotoneHome01Icon,
  RoundedDuotoneStarIcon,
  RoundedDuotoneLockIcon,
} from 'vexel-icons'
</script>

<template>
  <RoundedDuotoneHome01Icon :size="24" />
  <RoundedDuotoneStarIcon :size="24" />
  <RoundedDuotoneLockIcon :size="24" />
</template>

Sizing ​

vue
<RoundedStrokeHome01Icon :size="16" />
<RoundedStrokeHome01Icon :size="20" />
<RoundedStrokeHome01Icon :size="24" />
<RoundedStrokeHome01Icon :size="32" />
<RoundedStrokeHome01Icon :size="40" />
<RoundedStrokeHome01Icon :size="48" />

Custom Colors ​

vue
<RoundedStrokeHome01Icon :size="28" color="#3b82f6" />
<RoundedStrokeStarIcon :size="28" color="#f59e0b" />
<RoundedSolidStarIcon :size="28" color="#f59e0b" />

Stroke Width ​

vue
<RoundedStrokeHome01Icon :size="28" :stroke-width="1" />
<RoundedStrokeHome01Icon :size="28" :stroke-width="1.5" />
<RoundedStrokeHome01Icon :size="28" :stroke-width="2" />
<RoundedStrokeHome01Icon :size="28" :stroke-width="2.5" />

Use with VeloxUI Components ​

Иконки без проблем работают с компонентами VeloxUI:

vue
<VxButton>
  <template #icon>
    <RoundedStrokeDownload01Icon :size="16" />
  </template>
  Download
</VxButton>
vue
<VxAlert type="info" title="Icons work in alerts too!">
  <template #icon>
    <RoundedDuotoneNotification01Icon :size="22" />
  </template>
</VxAlert>

All Categories ​

60 категорий и более 49 000 иконок. Посмотреть полную коллекцию можно на vexel-icons.vercel.app.