Getting Started
Choosing a Package
Compare standard vs. performance-optimized Solar Icon packages.
Some framework packages come in two variants: Standard and Performance (-perf).
Comparison
| Feature | Standard Package | Performance Package (-perf) |
|---|---|---|
| Dynamic Styles | ✅ Yes | ❌ No |
| Bundle Size | Larger | ✅ Smaller |
| Global Configuration | ✅ Yes | ❌ No |
| Primary Use Case | Development, dynamic styling | Production, performance-critical apps |
How they work
- Standard packages bundle all six styles inside each component. You can swap styles at runtime using the
weightprop, or configure defaults globally using a context provider. - Performance packages bundle only a single style per component (e.g.,
HomeBold). Unused styles are tree-shaken and excluded from the build.
React Example
@solar-icons/react: Standard package. All styles available in every icon. Supports global configuration.@solar-icons/react-perf: Performance package. Every icon includes a single style, minimizing bundle size.
How is this guide?
Last updated on