craftbits*

Richtext Icons

A purpose-built icon set for editorial and prose UIs. Seven HTTP method glyphs, a strong-leading marker, a list bullet, four prose arrows, a blockquote opening mark, and an external-link arrow. Pass name="method-get" (or any other registered name) and the matching SVG renders inline.

method-get
method-post
method-put
method-patch
method-delete
method-head
method-options
strong-marker
list-bullet
arrow-right
arrow-left
arrow-double-right
arrow-double-left
blockquote
external-link
Customize
Icon set
24px
fg

Installation

npx shadcn@latest add https://craftbits.dev/r/richtext-icons.json

Usage

import { RichtextIcon } from "@craft-bits/core";
 
<RichtextIcon name="method-get" size={16} />

Understanding the component

  1. One inline SVG per icon. RichtextIcon renders one <svg> and switches both the inner body and the intrinsic viewBox based on name. Wide arrows, squat blockquotes, and square method glyphs all keep their natural silhouettes.
  2. Aspect-aware sizing. size is the height in pixels; the width is derived from the icon's intrinsic aspect ratio so glyphs never get squashed when dropped into rows of mixed icons.
  3. currentColor strokes and fills. Every glyph paints with currentColor, so colouring is just setting color on the parent (or passing accentColor for a one-off override).
  4. RICHTEXT_ICONS map for iteration. The full glyph table is exported so legends, toolbars, and sidebars can iterate the set without re-listing names.

Variants / Examples

// Tint via parent color.
<span className="text-cb-accent">
  <RichtextIcon name="strong-marker" size={20} />
</span>
 
// One-off accent without a wrapping span.
<RichtextIcon name="arrow-right" accentColor="#6366f1" size={18} />
 
// Iterate the full set.
import { RICHTEXT_ICON_NAMES } from "@craft-bits/core";
 
{RICHTEXT_ICON_NAMES.map((n) => <RichtextIcon key={n} name={n} />)}

Props

PropTypeDefaultDescription
nameRichtextIconNamerequiredWhich glyph to render. See the demo above for the full set.
sizenumber16Pixel height. Width is derived from the glyph's aspect ratio.
accentColorstring—Optional override for the icon color (sets inline style.color).
classNamestring—Extra classes merged onto the <svg>.

Accessibility

  • Each glyph is decorative (aria-hidden="true") by default. If the icon carries meaning on its own — e.g. a method label in a list — pair it with a visible text label or override with an aria-label on the consuming element.
  • Strokes and fills use currentColor and the default fill is none, so contrast tracks the parent text color and inherits any prefers-contrast overrides applied site-wide.

Credits

  • Extracted from: terminal-dreams (src/components/ui/richtext-icons.tsx).