pristine-elements
v1.1.5
Published
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
Downloads
489
Readme
# 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:
| Icon Library | Website | License | License Link | Version | |--------------------|-----------------------------------|---------------|-------------------------------------------------------------|--------------| | Boxicons | Boxicons | MIT | MIT License | Latest | | Feather Icons | Feather Icons | MIT | MIT License | Latest | | Material Icons | Material Icons | Apache 2.0 | Apache License 2.0 | Latest | | Heroicons | Heroicons | MIT | MIT License | Latest | | Font Awesome | Font Awesome | CC BY 4.0 | Creative Commons BY 4.0 | Latest | | Ionicons | Ionicons | MIT | MIT License | Latest | | Typicons | Typicons | CC BY-SA 3.0 | Creative Commons BY-SA 3.0 | Latest | | Remix Icon | Remix Icon | Apache 2.0 | Apache License 2.0 | Latest | | Tabler Icons | Tabler Icons | MIT | MIT License | Latest | | Simple Icons | Simple Icons | CC0 1.0 | CC0 1.0 Universal | Latest |
Happy coding!