@repletory/svg v1.0.1

@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.

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 | 'sm' | 'lg'

false

Adds a shadow effect to the icon.

License

This library is licensed under MIT. Contributions are welcome!