Orio UI

Appearance

Icon Registry ​

Central registry for all bundled SVG icons used in the Icon component.

Overview ​

The icon registry provides a collection of commonly used SVG icons bundled with Orio UI. All icons are stored as inline SVG strings for optimal performance and flexibility.

Available Icons ​

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
minus
calendar
close
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
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
bell
info
warning
check-circle
error-circle
help
truck
location
map-pin
compare
discount
box

Usage ​

The icon registry is used internally by the OrioIcon component:

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

Accessing the Registry ​

If you need direct access to the registry:

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)

Registry Structure ​

The registry is a simple key-value object:

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 Support ​

The IconName type provides autocomplete for all available icons:

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

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

Adding Custom Icons ​

To add custom icons to your project, you can extend the registry or use the Icon component's ability to accept any icon name:

Method 1: Extend the Registry ​

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>`

Then import this file in your app:

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

Method 2: Using External Icon Libraries ​

You can use the Icon component with external icon libraries by setting the icon SVG at runtime:

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>

Icon Sources ​

The bundled icons are sourced from:

For additional icons, check out icones.js.org - a comprehensive icon explorer.

Performance Notes ​

  • Icons are bundled as inline SVG strings for zero network requests
  • SVGs are rendered directly in the DOM with v-html
  • Icons use currentColor by default, inheriting text color
  • No icon font files to load
  • Supports all modern SVG features (animations, gradients, etc.)

Examples ​

Creating an Icon Picker ​

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>

See Also ​