@repletory/icon v1.0.4
@repletory/icon Documentation body { font-family: Arial, sans-serif; line-height: 1.6; margin: 20px; } h1, h2, h3 { color: #0070f3; } pre { background-color: #f4f4f4; padding: 10px; border-radius: 5px; overflow: auto; } code { background-color: #f9f9f9; padding: 2px 5px; border-radius: 3px; font-family: monospace; } ul { margin-left: 20px; }
@repletory/icon
@repletory/icon is a reusable React component that dynamically renders SVG icons from the @repletory/svg library. It allows customization of size, color, variant, and shadow for icons.
Installation
npm install @repletory/icon @repletory/svg
or
yarn add @repletory/icon @repletory/svg
Features
- Dynamically renders SVGs from
@repletory/svg. - Supports multiple sizes (
xxs,xs,sm,md,lg,xl,xxl,xxxl). - Customize icon colors.
- Built-in shadow options with
shadow,shadowSm, andshadowLg.
Usage
To use the Icon component, first import the desired SVGs from @repletory/svg and pass them to the Icon component.
import React from 'react'; import { heart, alarm } from '@repletory/svg'; import Icon from '@repletory/icon';
const Example = () => (
);
export default Example;
Props
Prop
Type
Default
Description
name
keyof typeof Icons
Required
The name of the icon imported from @repletory/svg.
variant
'bold' | 'duotone' | 'fill' | 'light' | 'regular' | 'thin'
'regular'
The style variant of the icon.
size
'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | string
'md'
The size of the icon. Can be predefined or custom.
color
string
'black'
The color of the icon. Accepts any valid CSS color value.
shadow
boolean
false
Applies a default shadow to the icon.
shadowSm
boolean
false
Applies a small shadow to the icon.
shadowLg
boolean
false
Applies a large shadow to the icon.
Shadow Behavior
Only one shadow can be applied at a time. The priority order is: shadowLg > shadowSm > shadow.
If multiple shadow props are set to true, the higher priority shadow will be applied.
Examples
License
This library is licensed under MIT. Contributions are welcome!