---
status: beta
title: Icon
desc: Symbols that can be used to represent various options or actions
ico: mdi:information-outline
keywords:
  - graphic
  - spinner

props:
  - class: .prs-icon
    type: component
    desc: Container
  - class: .prs-icon-xs
    type: modifier
    desc: Extra small variant
  - class: .prs-icon-sm
    type: modifier
    desc: small variant
  - class: .prs-icon-lg
    type: modifier
    desc: Large variant
  - class: .prs-icon-xl
    type: modifier
    desc: Extra large variant

controls:
  - name: icon
    type: text
    label: Icon
    desc: <a href="https://icon-sets.iconify.design/mdi/">MDI</a> icon name sans the mdi prefix.
    prefix: 'mdi:'
    placeholder: icon-name
    default: check

  - name: size
    type: radio
    label: Size
    desc: Sizes... you can also apply the size by using an inline --size style on the .prs-ico tag. Please use the <a href="../../foundation/grid/">Grid/Spacing scale</a> size tokens for best results.
    default: default
    options:
      - xs
      - sm
      - default
      - lg
      - xl

  - name: rotate
    type: radio
    label: Rotate
    desc: Rotation.
    default: none
    options:
      - none
      - 90deg
      - 180deg
      - 270deg

  - name: animate
    type: radio
    label: Animate
    desc: Animation.
    default: none
    options:
      - none
      - spin
      - ping
      - blink
      - float
      - bounce
      - pulse

  - name: duration
    type: radio
    label: Duration
    desc: Animation duration.
    default: default
    options:
      - sneeze
      - breath
      - default
      - linger
      - rest
    showIf: 'animate !== "none"'

preview: |
  <i
    class="prs-ico"
    :class="{
      'prs-ico-xs': size === 'xs',
      'prs-ico-sm': size === 'sm',
      'prs-ico-lg': size === 'lg',
      'prs-ico-xl': size === 'xl',
      'prs-animation-spin': animate === 'spin',
      'prs-animation-ping': animate === 'ping',
      'prs-animation-blink': animate === 'blink',
      'prs-animation-float': animate === 'float',
      'prs-animation-bounce': animate === 'bounce',
      'prs-animation-pulse': animate === 'pulse',
      'prs-duration-sneeze': duration === 'sneeze',
      'prs-duration-breath': duration === 'breath',
      'prs-duration-linger': duration === 'linger',
      'prs-duration-rest': duration === 'rest',
    }"
  >
    <iconify-icon :icon="icon ? 'mdi:'+ icon : 'mdi:check'" :rotate="rotate !== 'default' ? rotate : null" noobserver></iconify-icon>
  </i>

code:
  html: |
    <i class="prs-ico{size}{animate}{duration}">
      <iconify-icon icon="mdi:{icon}"{rotate} noobserver></iconify-icon>
    </i>
  logic:
    icon: "this.icon"
    size: "this.size !== 'default' ? (' prs-ico-'+ this.size) : ''"
    animate: "this.animate !== 'none' ? (' prs-animation-'+ this.animate) : ''"
    duration: "this.duration !== 'default' ? (' prs-duration-'+ this.duration) : ''"
    rotate: "this.rotate !== 'none' ? (' rotate=\"'+ this.rotate +'\"') : ''"
---