@sjminnovations/icons

@sjminnovations/icons

A comprehensive and customizable icon library for React applications, featuring over 9000 icons with multiple variants. Easily import and use icons with intuitive naming conventions and flexible styling options.

Table of Contents

• Features
• Installation
• Peer Dependencies
• Usage
  • Importing Icons
  • Using the SJMIcon Component
  • Variants
  • Example
• Available Icons
  • IntelliSense Support
  • Naming Convention
  • Icon Gallery (Coming Soon)
• Bundler Configuration
  • Webpack
• Contributing
• License

Features

• Extensive Collection: Over 9000 icons covering various categories and styles.
• Multiple Variants: Icons available in variants like regular, bold, duotone, fill, light, and thin.
• Easy Usage: Use icons by specifying their names and variants, with IDE auto-completion support.
• Customizable: Adjust icon size, color, and other props for flexibility.
• Optimized Bundle Size: Only the icons you use are included, thanks to dynamic imports and code splitting.
• No External Dependencies: Only peer dependencies are react and prop-types.

Installation

Install the package via npm:

npm install @sjminnovations/icons

or using yarn:

yarn add @sjminnovations/icons

Peer Dependencies

Ensure that you have the following peer dependencies installed in your project:

• React: ^16.8.0 || ^17.0.0 || ^18.0.0
• PropTypes: ^15.7.0

Install them if you haven't already:

npm install react prop-types

Usage

Importing Icons

You can import icon name constants from the package, allowing for auto-completion in your IDE:

import { SJMIcon, ic_heart, ic_plus } from '@sjminnovations/icons';

Icon Name Constants: Constants like ic_heart, ic_plus represent the names of the icons.

No Need to Import Individual Icons: The icons are loaded dynamically based on the name and variant you provide.

Using the SJMIcon Component

The SJMIcon component dynamically loads the required icon based on the name and variant props.

<SJMIcon
  name={ic_heart}
  size="md"
  color="red"
  variant="fill" // Optional, defaults to 'regular'
/>

Props:

• name (required): The icon name constant (e.g., ic_heart).
• variant (optional): The icon variant (regular, bold, duotone, fill, light, thin). Defaults to regular.
• size (optional): The icon size. Can be a preset size (xxs, xs, sm, md, lg, xl, xxl) or a custom number (pixels). Defaults to md.
• color (optional): The icon color. Defaults to currentColor.

Variants

Icons are available in the following variants:

• regular (default)
• bold
• duotone
• fill
• light
• thin

Specify the variant using the variant prop. If not specified, regular is used by default.

Example

Here's a complete example demonstrating how to use icons with variants in your application:

import React from 'react';
import { SJMIcon, ic_heart, ic_plus } from '@sjminnovations/icons';

const App = () => (
  <div>
    {/* Using the 'fill' variant */}
    <SJMIcon name={ic_heart} size={30} color="red" variant="fill" />

    {/* Using the 'bold' variant */}
    <SJMIcon name={ic_plus} size="lg" color="blue" variant="bold" />

    {/* Using the default 'regular' variant */}
    <SJMIcon name={ic_heart} size="md" color="green" />
  </div>
);

export default App;

Available Icons

With over 9000 icons, it might be overwhelming to find the one you need. Here's how you can discover available icons:

IntelliSense Support

All icon names are exported as constants, which provides IntelliSense support in IDEs like VSCode.

import { ic_heart, ic_close, ic_search } from '@sjminnovations/icons';

// Use auto-completion to find available icons

Naming Convention

• Icons are named using lowercase words separated by underscores.
• All icon names start with the ic_ prefix.
• Examples: ic_heart, ic_align_center_vertical, ic_search.

Icon Gallery (Coming Soon)

We are working on a comprehensive icon gallery website where you can visually browse and search for icons and their variants.

Bundler Configuration

To use this library, you need to configure your bundler to handle dynamic imports and SVG files. Here's how to do it with Webpack.

Webpack

Install the necessary loaders:

npm install --save-dev @svgr/webpack

Update your webpack.config.js:

module.exports = {
  // ... existing configuration ...
  module: {
    rules: [
      // ... other rules ...
      {
        test: /\.svg$/,
        issuer: /\.[jt]sx?$/,
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              svgo: false,
            },
          },
        ],
      },
    ],
  },
};

This configuration tells Webpack to use @svgr/webpack to handle SVG files imported in JavaScript/TypeScript files.

Contributing

We welcome contributions! Here's how you can help:

• Report Issues: If you find any bugs or have feature requests, please open an issue on GitHub.
• Submit Pull Requests: For code changes, fork the repository and submit a pull request with your improvements.
• Add Icons: If you have icons you'd like to add, please ensure they meet the project's guidelines and submit them via a pull request.

License

This project is licensed under the ISC License. See the LICENSE file for details.

Happy Coding!

If you have any questions or need further assistance, feel free to reach out or open an issue on GitHub.