pristine-elements v1.1.5

# Pristine Elements - React Icon Library

**Pristine Elements** is a React icon library providing customizable SVG icons with support for animations. It allows you to easily add icons to your React project with the flexibility to adjust size, color, and animations.

## Installation

To install the `pristine-elements` package, run:

```bash
npm install pristine-elements

Usage

To use an icon from pristine-elements, simply import the specific icon and use it in your component. Each icon supports customization for size, color, and animation.

Example

import React from "react";
import { BxiUniversalAccessFill } from "pristine-elements";

const App = () => {
  return (
    <div>
      <BxiUniversalAccessFill size={48} color="blue" animation="animate-spin" />
    </div>
  );
};

export default App;

Available Props

• size: The size of the icon in pixels. (default: 24)
• color: The color of the icon. You can use any valid CSS color. (default: "black")
• animation: CSS class for applying animations (optional). You can define your own animation classes and pass them here.

Icon Components

Each icon in the library has its own component that can be imported and customized. The base component is designed to handle multiple circles and paths, allowing each icon to be dynamically rendered.

Common Icons

• Universal Access (Filled):

  import { BxiUniversalAccessFill } from "pristine-elements";
  
  <BxiUniversalAccessFill size={32} color="red" animation="animate-spin" />

• Universal Access (Stroke):

  import { BxiUniversalAccessStroke } from "pristine-elements";
  
  <BxiUniversalAccessStroke size={32} color="green" />

• Accessibility:

  import { BxiAccessibility } from "pristine-elements";
  
  <BxiAccessibility size={32} color="blue" />

• Baby Carriage:

  import { BxiBabyCarriage } from "pristine-elements";
  
  <BxiBabyCarriage size={32} color="purple" />

• Captions (Filled & Stroke):

  import { BxiCaptions, BxiCaptionsFill } from "pristine-elements";
  
  <BxiCaptions size={32} color="orange" />
  <BxiCaptionsFill size={32} color="gray" />

• Info Circle (Filled & Stroke):

  import { BxiInfoCircle, BxiInfoCircleFill } from "pristine-elements";
  
  <BxiInfoCircle size={32} color="teal" />
  <BxiInfoCircleFill size={32} color="black" />

• Question Mark:

  import { BxiQuestionMark } from "pristine-elements";
  
  <BxiQuestionMark size={32} color="red" />

• Help Circle (Filled & Stroke):

  import { BxiHelpCircle, BxiHelpCircleFill } from "pristine-elements";
  
  <BxiHelpCircle size={32} color="yellow" />
  <BxiHelpCircleFill size={32} color="brown" />

• Handicap:

  import { BxiHandicap } from "pristine-elements";
  
  <BxiHandicap size={32} color="blue" />

Custom Animations

You can pass custom CSS animation classes using the animation prop. Define your animations in your CSS file and apply them to any icon.

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 2s linear infinite;
}

Example usage:

<BxiUniversalAccessFill size={48} color="blue" animation="animate-spin" />

License

This package is licensed under the MIT License.

Icon Libraries

Here are some icon libraries that can be integrated into Pristine Elements for extended customization and flexibility:

Happy coding!