@solar-icons/react

The @solar-icons/react package provides a robust, flexible, and easy-to-use library of React components for the Solar icon set. This package enables developers to seamlessly integrate Solar's multi-style icons into React applications, supporting both client-side rendering (CSR) and server-side rendering (SSR).

Installation

Install the package using npm or yarn:

npm install @solar-icons/react

or

yarn add @solar-icons/react

Usage

To use an icon in your React application, simply import it from the package:

import solar, { ArrowUp } from '@solar-icons/react';
import { Arrows } from '@solar-icons/react/category';

function App() {
  return (
    <>
        <ArrowUp size={24} weight="Outline" mirrored />
        <solar.Arrows.ArrowDown size={32} weight="BoldDuotone"  />
        <Arrows.AltArrowLeft color="#fff" className="bg-black" weight="Bold" />
    </>
  );
}

Properties

Each icon component supports the following properties:

• size: Defines the size of the icon (e.g., 24, "1.5em").
• color: Sets the color of the icon (e.g., "#000", "currentColor").
• weight: Specifies the icon style. Options include "Bold", "Linear", "Outline", "BoldDuotone", "LineDuotone", and "Broken".
• mirrored: Flips the icon horizontally when set to true.

Advanced Usage

Global Icon Configuration

To apply consistent styles across multiple icons, use the SolarProvider component to wrap your application:

import { SolarProvider } from '@solar-icons/react';

function App() {
  return (
    <SolarProvider value={{ size: '32', color: 'purple', weight: 'Linear' }}>
      <YourComponents />
    </SolarProvider>
  );
}

Server-Side Rendering (SSR)

The @solar-icons/react package is optimized for SSR, ensuring that icons render correctly on both the client and server sides:

import solar, { ArrowUp } from '@solar-icons/react/ssr';
import { Arrows } from '@solar-icons/react/ssr/category';

function App() {
  return (
    <>
        <ArrowUp size={24} weight="Outline" />
        <solar.Arrows.ArrowDown size={32} weight="BoldDuotone"  />
        <Arrows.AltArrowLeft color="#fff" className="bg-black" weight="Bold" />
    </>
  );
}

Contributing

As an open-source project, contributions are welcome. However, please note that while the Solar project is maintained by a single developer, we encourage anyone interested to contribute through pull requests and issues.

License

This libraries are licensed under the MIT License, making it free for both personal and commercial use. However, the Solar icon pack is licensed under CC BY 4.0 by 480 Design, which allows commercial use with attribution. Please visit 480 Design's Figma page to explore the original icon set or see the LICENSE-THIRD-PARTY file.

Acknowledgements

Special thanks to 480 Design for creating the original Solar icon pack. Additional appreciation goes to Phosphor Icons and Lucide Icons for their inspiration in shaping the structure and approach of the @solar-icons/react package.

For detailed documentation and examples, refer to the project's main documentation.