Icons

Rappel-UI provides a set of icons to use in your project.
You can use icon component object directly, or async load icons by icon name with the getAsyncIcon method.
Directly Use SVG Icons Component
Use Icon by <ReSvgIcon> Component (click to copy icon name)
vue
<template>
  <div>
    <p>Directly Use SVG Icons Component</p>
    <div class="icons-demo">
      <Star stroke-width="2" size="24px" />
      <StarFill stroke-width="1" size="24px" />
      <component :is="icon" size="24px" />
    </div>
    <div class="icon-search">
      <div>Use Icon by &lt;ReSvgIcon&gt; Component (click to copy icon name)</div>
      <!-- TODO when <re-input /> is available -->
      <input
        v-if="false"
        v-model="iconName"
        class="search-input"
        placeholder="input icon name to search"
        type="text"
      />
    </div>
    <div class="icons-demo">
      <div
        v-for="item in svgIconMetas"
        :key="item.path"
        class="icon-item"
        @click.stop="copy(item)"
        @mouseenter="enter($event, item)"
      >
        <re-svg-icon size="24px" v-bind="item" />
      </div>
    </div>
    <re-tooltip is-external :external-ref="externalRef">
      <template #content>
        <div class="flex items-center">
          <div class="mr-5px">{{ content }}</div>
          <CheckCircle v-show="isCopied" size="20" color="var(--re-color-success-base)" />
        </div>
      </template>
    </re-tooltip>
  </div>
</template>
<script lang="ts" setup>
import { ref, type Component } from 'vue'
import { computedAsync } from '@vueuse/core'
import * as icons from '@rappel-ui/svg-icons'
import { Star, StarFill, CheckCircle, getAsyncIcon, type SvgIconMeta } from '@rappel-ui/svg-icons'
import { ReSvgIcon, ReTooltip } from 'rappel-ui'
import { copyText } from '@rappel-ui/utils'

const svgIconMetas: SvgIconMeta[] = Object.values(icons)
  .map((comp) => (comp?.isIcon ? comp?.meta : null))
  .filter(Boolean)

const icon = computedAsync(async () => await getAsyncIcon('check-circle')) as Component

const externalRef = ref<HTMLElement | null>(null)
const content = ref<string>('')
const isCopied = ref<boolean>(false)

const copy = (item: SvgIconMeta) => {
  copyText(item.name)
    .then((_) => {
      isCopied.value = true
    })
    .catch((err) => {
      console.error(err, 'copy fail')
    })
}

const enter = (event: MouseEvent, item: SvgIconMeta) => {
  externalRef.value = event.target as HTMLElement
  content.value = item.name
  isCopied.value = false
}

const iconName = ref<string>('')
</script>
<style lang="scss" scoped>
.icons-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;

  .icon-item {
    cursor: pointer;
    color: var(--vp-icon-color);
    &:hover {
      color: var(--vp-icon-hover-color);
    }
  }
}
.icon-search {
  @apply flex items-center gap-20px py-1.5em;
}
</style>
Icons ​

Icons
