[Feature]: Framework-Agnostic SVG Icons for Cross-Framework Compatibility

[Soren-Knudsen]

Prerequisites

• I have searched existing issues to ensure this feature hasn't been requested already
• I have checked the documentation to confirm this feature doesn't exist
• This feature aligns with the project's goals and would benefit the community

Feature type

Other

Component name

No response

Feature description

Currently, the @untitledui-pro/icons package appears to be specifically designed for React. I would like to use these icons in my Vue.js project, but the current implementation makes this difficult. It would be beneficial to have access to the raw SVG files or a framework-agnostic approach that works across different frameworks.

Problem statement

• The icons package is React-specific
• Using icons in Vue.js requires workarounds or is not possible
• This limits the usability of the icon library across different tech stacks

Proposed solution

Provide one or more of the following options:

Option 1: Raw SVG Files

Export raw SVG files that can be imported and used in any framework:

// Example usage in Vue
import iconFile from "@untitledui-pro/icons/svg/files-file-05.svg";

Option 2: Framework-Agnostic JavaScript Objects

Export icons as JavaScript objects containing SVG strings:

// Example
import { File05 } from "@untitledui-pro/icons/svg";
// File05 = { svg: "<svg>...</svg>", viewBox: "0 0 24 24" }

Option 3: Multiple Framework Builds

Provide separate builds for different frameworks:

// React (current)
import { File05 } from "@untitledui-pro/icons/react";

// Vue
import { File05 } from "@untitledui-pro/icons/vue";

// SVG (framework-agnostic)
import { File05 } from "@untitledui-pro/icons/svg";

Proposed API design

Use cases

No response

Alternatives considered

No response

Examples from other libraries

No response

Priority level

High - Blocking my project

Requirements

• Must be accessible (WCAG 2.1 AA compliant)
• Must be responsive (mobile-first)
• Must follow existing design patterns
• Must be TypeScript compatible
• Must work with keyboard navigation
• Must work with screen readers
• Must have comprehensive documentation
• Must include Storybook stories

Contribution

• I'm willing to implement this feature
• I'm willing to help with design/specification
• I'm willing to help with testing
• I'm willing to help with documentation

Design mockups/references

No response

Additional context

No response

[deebov]

Hey @Soren-Knudsen, thanks a lot for the suggested solutions! I will discuss with the team what we think about this.