🎨 Theming

Theming can be done during:

• Build time, with configuration given to the module or custom CSS tokens
• Runtime, with props passed to each icon instance or via CSS variables

nuxt-compose-icons is built around CSS variables, making it easy to integrate with any design system or theme — whether you use Tailwind, tokens, or a custom style layer.

The recommended approach is to define a global icon theme in your CSS or design tokens, and then override it at runtime with props when needed.

---

💡 Concept

Each icon component uses CSS variables to control its visual properties:

Property	CSS Variable	Description
fill	--icon-fill	Controls the inner color of filled paths.
stroke	--icon-stroke	Controls outline or stroke color.
stroke-width	--icon-stroke-width	Controls the line thickness.
color	Fallback to --icon-stroke	Shortcut prop for stroke color.
size	--icon-size (via class)	Controlled via IconSize tokens.

All variables are defined per component but can be overridden globally via CSS or theme providers.

---

🧩 Example

<template>
  <TwitterIcon color="var(--brand-primary)" fill="none" stroke-width="2" />
</template>

You can define your global icon theme in your CSS or design tokens:

:root {
  --icon-stroke: currentColor;
  --icon-fill: transparent;
  --icon-stroke-width: 1.5;
}

You can safely combine runtime props with global variables (props take priority).

INFO

stroke and color props both map to --icon-stroke.

---

📐 Referencing size tokens with useComposeIconTheme

--icon-size above is set per icon from the size prop, but sometimes you need to reference the module's configured size scale from your own application code — for example, to build a size-picker UI or align a non-icon element to the same scale. useComposeIconTheme() reads the sizes map from your module config and exposes helpers to reference it as CSS variables:

<script setup>
const { sizes, sizeVar, currentSizeVar } = useComposeIconTheme();
// Object.keys(sizes) -> ['sm', 'md', 'lg', 'hero'] — from your config
// sizeVar('lg')       -> 'var(--size-lg)', to align any element to a named size
// currentSizeVar      -> 'var(--icon-size)', the size active on the nearest icon
</script>

This is purely a size-token accessor, not a general theming API — colors and stroke are controlled by the CSS variables above, not by this composable.