1.0.5 • Published 10 months ago
@precooked/react-dynamic-icon v1.0.5
@precooked/react-dynamic-icon
@precooked/react-dynamic-icon is React component for rendering dynamic SVG icons with customizable paths and colors. The icon scales based on the provided size prop and defaults to a 24x24 size.
Installation
To install the package, use the following command:
npm install @precooked/react-dynamic-iconor
yarn add @precooked/react-dynamic-iconUsage
import React from 'react';
import DynamicIcon from '@precooked/react-dynamic-icon';
const MyIcon = () => {
const paths = [
{ d: "M10 10 H 90 V 90 H 10 Z", color: "primary" },
{ d: "M50 10 L 90 90 L 10 90 Z", color: "#ff0000" },
];
return <DynamicIcon size={48} paths={paths} />;
};
export default MyIcon;Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 24 | The size of the icon (width and height in pixels). |
paths | Path[] | - | An array of path objects defining the SVG paths. Each object should contain a d attribute for the path's data and an optional color attribute. |
styles | React.CSSProperties | - | Optional styles for the SVG element. |
Path Objects
Each path object should include:
d(string): Thedattribute of the SVG path. Defines the path data.color(string, optional): The color of the path. If it matches a key in thecolorsutility, the corresponding color will be applied. Otherwise, it will be treated as a valid CSS color.
Important Note
The SVG icon's viewBox is set to 0 0 100 100, meaning the paths should be designed with a 100x100 proportion for optimal display. Ensure that the paths are scaled accordingly for the best rendering results.
License
This project is licensed under the MIT License.