Designing a Locked Size & Stroke Token Map

Start by exporting clean base geometry from SVG Nexus's multi-framework JSX/Vue/Svelte converter, then map four semantic size tokens so developers choose intent rather than raw pixels:

Shared IconFrame helper enforcing size tokens, shrink-0, and ARIA rules in React
import * as React from "react";

const SIZE_MAP = {
  xs: { box: "size-3.5", stroke: 2.25 }, // 14px — badges & kbd hints
  sm: { box: "size-4", stroke: 2 },      // 16px — compact buttons & table rows
  md: { box: "size-5", stroke: 2 },      // 20px — standard inputs & nav items
  lg: { box: "size-6", stroke: 1.75 },   // 24px — section headers & empty cards
} as const;

export interface SystemIconProps extends Omit<React.SVGProps<SVGSVGElement>, "children"> {
  size?: keyof typeof SIZE_MAP;
  label?: string;
}

export function createStrokeIcon(displayName: string, paths: React.ReactNode) {
  function Component({ size = "md", label, className = "", ...rest }: SystemIconProps) {
    const token = SIZE_MAP[size];
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth={token.stroke}
        strokeLinecap="round"
        strokeLinejoin="round"
        className={`${token.box} shrink-0 ${className}`.trim()}
        role={label ? "img" : undefined}
        aria-label={label}
        aria-hidden={label ? undefined : true}
        focusable="false"
        {...rest}
      >
        {paths}
      </svg>
    );
  }
  Component.displayName = displayName;
  return Component;
}

Matching Pattern for Vue 3 (<script setup>) and Svelte

Notice how optical stroke scaling works in SIZE_MAP: at 14px (xs), bumping strokeWidth slightly to 2.25 prevents lines from looking washed out, while at 24px (lg), easing to 1.75 keeps icons refined. Apply the exact same size prop dictionary inside Vue 3 defineProps<{ size?: 'xs' | 'sm' | 'md' | 'lg'; label?: string }>() or Svelte 5 rune props so cross-framework micro-frontends look identical.