Icons

Rappel-UI svg-icons库提供常见的图标使用，可以直接使用图标组件，也可以结合组件<ReSvgIcon />通过传入path属性使用

你可以直接使用icons库组件，也可以引入 svgIcons 对象，配合 <ReSvgIcon /> 标签使用

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