Styleframe Logo
Utilities

SVG

Create SVG utilities for fill, stroke, and stroke-width with full type safety.

Overview

SVG utilities help you style SVG elements including fill colors, stroke colors, and stroke widths. These utilities work with inline SVG elements and SVG icon components.

Why Use SVG Utilities?

SVG utilities help you:

  • Style icons consistently: Apply colors from your design system to SVG icons
  • Support theming: SVG colors can automatically adapt to theme changes
  • Create interactive states: Combine with modifiers for hover and focus colors
  • Control stroke appearance: Adjust stroke width for different visual weights

useFillUtility

The useFillUtility() function creates utility classes for setting SVG fill colors.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useColor } from "@styleframe/theme";
import { useFillUtility } from "@styleframe/theme";

const s = styleframe();
const { ref } = s;

const { colorPrimary, colorGray500 } = useColor(s, {
    primary: '#006cff',
    gray500: '#6b7280',
} as const);

useFillUtility(s, {
    none: 'none',
    current: 'currentColor',
    primary: ref(colorPrimary),
    gray: ref(colorGray500),
    white: '#fff',
    black: '#000',
});

export default s;
Pro tip: Use fill: currentColor to make SVG icons inherit their color from the parent element's color property.

useStrokeUtility

The useStrokeUtility() function creates utility classes for setting SVG stroke colors.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useColor } from "@styleframe/theme";
import { useStrokeUtility } from "@styleframe/theme";

const s = styleframe();
const { ref } = s;

const { colorPrimary, colorGray500 } = useColor(s, {
    primary: '#006cff',
    gray500: '#6b7280',
} as const);

useStrokeUtility(s, {
    none: 'none',
    current: 'currentColor',
    primary: ref(colorPrimary),
    gray: ref(colorGray500),
    white: '#fff',
    black: '#000',
});

export default s;

useStrokeWidthUtility

The useStrokeWidthUtility() function creates utility classes for setting SVG stroke width.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useStrokeWidthUtility } from "@styleframe/theme";

const s = styleframe();

useStrokeWidthUtility(s, {
    '0': '0',
    '1': '1',
    '2': '2',
});

export default s;

Examples

Themed Icon Component

styleframe.config.ts
import { styleframe } from "styleframe";
import { useColor } from "@styleframe/theme";
import { useFillUtility, useStrokeUtility } from "@styleframe/theme";

const s = styleframe();
const { ref, modifier } = s;

const { colorPrimary, colorGray500 } = useColor(s, {
    primary: '#006cff',
    gray500: '#6b7280',
} as const);

// Base icon colors
useFillUtility(s, {
    none: 'none',
    current: 'currentColor',
    primary: ref(colorPrimary),
    gray: ref(colorGray500),
});

useStrokeUtility(s, {
    current: 'currentColor',
    primary: ref(colorPrimary),
    gray: ref(colorGray500),
});

// Hover state modifier
const hover = modifier('hover', ({ declarations }) => ({
    '&:hover': declarations,
}));

// Apply primary color on hover
useFillUtility(s, { primary: ref(colorPrimary) }, [hover]);
useStrokeUtility(s, { primary: ref(colorPrimary) }, [hover]);

export default s;

Usage in HTML:

<button>
    <svg class="_fill:none _stroke:gray _hover:stroke:primary" width="24" height="24">
        <path d="..." />
    </svg>
</button>

Icon with Text Color Inheritance

styleframe.config.ts
import { styleframe } from "styleframe";
import { useFillUtility } from "@styleframe/theme";

const s = styleframe();

useFillUtility(s, {
    current: 'currentColor',
});

export default s;

Usage in HTML:

<a href="#" style="color: #006cff;">
    <svg class="_fill:current" width="16" height="16">
        <path d="..." />
    </svg>
    Link text
</a>

Best Practices

  • Use currentColor for icons: Makes icons inherit their parent's text color automatically
  • Set fill: none for stroke icons: Stroke-based icons need fill: none to appear correctly
  • Reference design tokens: Use ref() for consistent colors across your application
  • Consider accessibility: Ensure sufficient contrast for icon colors
  • Use viewBox for scalability: SVGs with viewBox scale properly with width/height utilities

FAQ

Spacing

Create spacing utilities for margin and padding with directional variants and full type safety.

Tables

Create table utilities for border collapse, spacing, layout, and caption positioning with full type safety.