Icons

Rappel-UI provides a set of icons to use in your project.

You can use the icons component directly, or import the svgIcons Object and use it with <re-svg-icon /> tag in the template.

Basic SVG Icons Component

Use Icon by ReSvgIcon Component

vue

<template>
  <div>
    <p>Basic SVG Icons Component</p>
    <div class="icons-demo">
      <Star stroke-width="2" size="24px" />
      <StarFill stroke-width="1" size="24px" />
    </div>
    <p>Use Icon by ReSvgIcon Component</p>
    <div class="icons-demo">
      <div
        v-for="item in svgIcons"
        :key="item.path"
        class="icon-item"
        :title="item.name"
        @click.stop="copy(item)"
      >
        <re-svg-icon
          size="24px"
          :path="item.path"
          :name="item.name"
          stroke-width="2"
          :fill="item.fill"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { svgIcons, Star, StarFill } from '@rappel-ui/svg-icons'
import { ReSvgIcon } from '@rappel-ui/components'
import { copyText } from '@rappel-ui/utils'

const copy = (item: any) => {
  copyText(item.name)
    .then((res) => {
      console.warn(res, 'copy', item.name)
    })
    .catch((err) => {
      console.warn(err, 'copy fail')
    })
}
</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);
    }
  }
}
</style>

Icons ​

Icons