Orio UI

Українська

English

Українська

English

Тема

Icon Registry ​

Центральний реєстр усіх вбудованих SVG-іконок, які використовує компонент Icon.

Огляд ​

Реєстр іконок містить набір поширених SVG-іконок, що постачаються з Orio UI. Усі іконки зберігаються як вбудовані SVG-рядки — для максимальної швидкодії та гнучкості.

Доступні іконки ​

loading-loop
chevron-down
chevron-up
chevron-left
chevron-right
arrow-up
arrow-down
arrow-left
arrow-right
arrow-back
arrow-forward
arrow-upward
arrow-downward
expand-more
expand-less
double-arrow-left
double-arrow-right
external-link
link
edit
check
plus
add
minus
calendar
close
close-rounded
search
upload
download
delete
copy
mail
message
chat
phone
play
pause
stop
skip-next
skip-previous
image
video
camera
mic
mic-off
volume
volume-off
file
folder
folder-open
document
pdf
upload-file
upload-file-filled
eye
eye-off
lock
unlock
github
twitter
facebook
instagram
youtube
linkedin
shopping-cart
shopping-bag
cart-plus
cart-remove
tag
barcode
package
gift
user
heart
heart-outline
star
star-outline
credit-card
wallet
receipt
home
menu
filter
grid-view
list-view
share
refresh
settings
wrench
bell
info
warning
check-circle
error-circle
help
truck
location
map-pin
compare
discount
box
pencil
text
undo
redo
eraser
move
highlight
rotate
resize
transform
export

Використання ​

Реєстр іконок використовується всередині компонента OrioIcon:

vue
<template>
  <orio-icon name="edit" />
  <orio-icon name="check" color="green" />
  <orio-icon name="loading-loop" size="32" />
</template>

Доступ до реєстру ​

Якщо потрібен прямий доступ до реєстру:

typescript
import { iconRegistry, type IconName } from '0re0-ui/runtime/utils/icon-registry'

// Get an icon SVG string
const editSvg = iconRegistry['edit']

// Get all icon names
const allIcons: IconName[] = Object.keys(iconRegistry)

Структура реєстру ​

Реєстр — це простий об'єкт «ключ-значення»:

typescript
export const iconRegistry: Record<string, string> = {
  'loading-loop': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>`,
  'chevron-down': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>`,
  'edit': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>`,
  // ... more icons
}

export type IconName = keyof typeof iconRegistry

Підтримка TypeScript ​

Тип IconName дає автодоповнення для всіх доступних іконок:

typescript
import type { IconName } from '0re0-ui/runtime/utils/icon-registry'

const iconName: IconName = 'edit' // ✓ Valid
const invalid: IconName = 'invalid' // ✗ Type error

Додавання власних іконок ​

Щоб додати власні іконки у проєкт, розширте реєстр або скористайтеся тим, що компонент Icon приймає будь-яку назву іконки:

Спосіб 1: розширити реєстр ​

typescript
// ~/utils/custom-icons.ts
import { iconRegistry } from '0re0-ui/runtime/utils/icon-registry'

// Add your custom icons
iconRegistry['custom-heart'] = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="currentColor" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>`

iconRegistry['custom-star'] = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="currentColor" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
</svg>`

Потім імпортуйте цей файл у застосунку:

typescript
// app.vue or plugin
import '~/utils/custom-icons'

Спосіб 2: зовнішні бібліотеки іконок ​

Компонент Icon можна використовувати із зовнішніми бібліотеками іконок, задаючи SVG іконки під час виконання:

vue
<script setup>
import { iconRegistry } from '0re0-ui/runtime/utils/icon-registry'

// Add icons from icones.js.org or other sources
iconRegistry['mdi-home'] = `<svg>...</svg>`
</script>

<template>
  <orio-icon name="mdi-home" />
</template>

Джерела іконок ​

Вбудовані іконки взято з:

Більше іконок шукайте на icones.js.org — це повноцінний оглядач іконок.

Примітки щодо швидкодії ​

  • Іконки вбудовані як SVG-рядки — нуль мережевих запитів
  • SVG рендеряться безпосередньо в DOM через v-html
  • Іконки за замовчуванням використовують currentColor і успадковують колір тексту
  • Жодних файлів іконкових шрифтів для завантаження
  • Підтримуються всі сучасні можливості SVG (анімації, градієнти тощо)

Приклади ​

Створення вибору іконки ​

vue
<script setup>
import { iconRegistry, type IconName } from '0re0-ui/runtime/utils/icon-registry'

const allIcons = Object.keys(iconRegistry) as IconName[]
const selectedIcon = ref<IconName>('edit')
</script>

<template>
  <div class="icon-picker">
    <orio-button
      v-for="iconName in allIcons"
      :key="iconName"
      variant="secondary"
      :class="{ selected: selectedIcon === iconName }"
      @click="selectedIcon = iconName"
    >
      <orio-icon :name="iconName" size="24" />
      <span>{{ iconName }}</span>
    </orio-button>
  </div>

  <div>
    Selected: <orio-icon :name="selectedIcon" size="48" />
  </div>
</template>

<style scoped>
.icon-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}

.icon-picker button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
}

.icon-picker button.selected {
  background: var(--accent-soft);
  border-color: var(--accent-base);
}
</style>

Див. також ​