VeloxUI

O'zbekcha

English
Русский

O'zbekcha

English
Русский

Appearance

Icons ​

Powered byVexel Icons

60 kategoriya va 5 uslubdan iborat 49,000+ pixel-perfect SVG ikonlar. VeloxUI bilan birga keladi — qo'shimcha o'rnatish shart emas.

  • 3 shakl: Rounded, Standard, Sharp
  • 5 uslub: Stroke, Solid, Duotone, Twotone, Bulk
  • CDN orqali ishlaydi: Ikonlar talab bo'yicha yuklanadi va localStorage'da keshlanadi
  • Tree-shakeable: Faqat siz import qilgan ikonlar bundle'ga qo'shiladi
  • Tiplangan: To'liq TypeScript qo'llab-quvvatlashi

Installation ​

Vexel Icons VeloxUI'ning dependency'si sifatida birga keladi. VeloxUI'ni o'rnatganingizda ikonlar avtomatik ravishda keladi:

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

Yoki ikonlarni alohida o'rnating:

bash
npm install vexel-icons

Usage ​

Istalgan ikonni nomi bo'yicha import qiling va Vue komponenti sifatida foydalaning:

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
NameIkon nomi (masalan, Home01, Search01, User)

Misol: RoundedStrokeHome01Icon, SharpSolidLockIcon, StandardDuotoneMailIcon

Props ​

PropTypeDefaultDescription
sizenumber | string24Ikon eni va balandligi
colorstring'currentColor'Ikon rangi
stroke-widthnumber | string1.5Stroke kengligi (stroke uslubi uchun)

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 ​

Ikonlar VeloxUI komponentlari bilan muammosiz ishlaydi:

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 ​

49,000+ ikon bilan 60 ta kategoriya. To'liq kolleksiyani vexel-icons.vercel.app saytida ko'rishingiz mumkin.