Icons

@nhtio/lucid-resourceful-vue-components/icons

Curated SVG assets used primarily by the alert modal system (info, error, success, warning, question). They’re exported so you can reuse them anywhere to keep a consistent visual language across your app—without relying on (or mixing with) a separate icon pack.

Why these icons exist

The alert composable (useAlert) needs clear, crisp status visuals that work in light/dark themes and scale predictably. Shipping purpose‑built SVGs avoids external sprite dependencies and guarantees consistent appearance regardless of your global icon setup.

Available exports

Each icon has two forms:

Name	Type	Description
infoIconUrl	string (URL)	Resolved URL for <img> / background-image usage.
infoIconRaw	string (SVG markup)	Raw SVG string for inline injection or sanitization pipelines.
errorIconUrl	string (URL)	Error status visual (critical / blocking).
errorIconRaw	string (SVG markup)	Raw error icon markup.
successIconUrl	string (URL)	Success / completion state.
successIconRaw	string (SVG markup)	Raw success icon markup.
warningIconUrl	string (URL)	Caution / potentially destructive action prompt.
warningIconRaw	string (SVG markup)	Raw warning icon markup.
questionIconUrl	string (URL)	Uncertainty / confirmation prompt.
questionIconRaw	string (SVG markup)	Raw question icon markup.

URL vs RAW

• Use the *Url variant when you want the browser to handle loading (<img :src="successIconUrl" />, CSS backgrounds, etc.).
• Use the *Raw variant when you need direct SVG markup (inline <span v-html="successIconRaw" /> after sanitization, dynamic recoloring, or embedding into an <svg> wrapper).

Example (Alert customization)

import { useAlert } from '@nhtio/lucid-resourceful-vue-components/composables'
import { warningIconUrl } from '@nhtio/lucid-resourceful-vue-components/icons'

const alert = useAlert()
await alert.fire({
  icon: warningIconUrl,
  title: 'Potential Data Loss',
  text: 'Are you sure you want to proceed? This cannot be undone.',
  showCancelButton: true,
  showConfirmButton: true,
})

You can also pass the raw string to a Vuetify VImg or wrap it in a custom component that recolors paths before display.

Styling & theming tips

• Inline (raw) markup lets you add currentColor fills or stroke adjustments for theme reactivity.
• For larger clickable areas, wrap the icon in a semantic <button> with an accessible label.
• Combine with aria-hidden="true" on purely decorative usage; add role="img" + aria-label for meaningful state conveyance.

Adding your own

You can mirror the existing pattern to add a new SVG:

1. Place my_icon.svg in src/private/icons/.
2. Import with both ?url and ?raw query modifiers in a local file or extend icons.ts:

import { default as myIconUrl } from './private/icons/my_icon.svg?url'
import { default as myIconRaw } from './private/icons/my_icon.svg?raw'
export { myIconUrl, myIconRaw }

3. Reference via @nhtio/lucid-resourceful-vue-components/icons barrel.

This keeps a consistent bundling approach and ensures tree‑shakability (unused icons drop from final builds).

Not Vuetify dependent

These assets are plain SVG files—no Vuetify icon set registration required. They intentionally sidestep global icon naming collisions while still pairing well with Vuetify components (e.g. passing a URL to VImg).

Quick reference

Import path: @nhtio/lucid-resourceful-vue-components/icons

Prefer URL for simple display / caching; prefer RAW for inline manipulation or dynamic recoloring.