Icon

No Picture, No Truth.

INFO

Roughness recommends using (and redraws) Lucide Icons.

Example

Basic

Show Code

<script lang="ts" setup>
import { CaseSensitive, Regex, WholeWord } from 'lucide'
import { RIcon, RSpace } from 'roughness'
</script>

<template>
  <RSpace vertical>
    <RSpace>
      <RIcon :icon="CaseSensitive" />
      <RIcon :icon="WholeWord" />
      <RIcon :icon="Regex" />
    </RSpace>
    <RSpace>
      <RIcon :icon="Tv" filled />
    </RSpace>
  </RSpace>
</template>

Color and Size

See Text.

Usage

View all available icons here.

Props

Name	Type	Default Value	Description
filled
graphicsOptions
icon		Required
...			See Text Props.

Styles

Name	Type	Default Value	Description
--r-icon-color
--r-icon-stroke-color
--r-icon-stroke-width
...			See Text Styles.