|
1 | | -# coolshapes |
| 1 | +# <p align=center>Coolshapes</p> |
| 2 | +<p align="center"> |
| 3 | + <a href="https://github.com/realvjy/coolshapes-react/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/coolshapes-react" alt="license"></a> |
| 4 | + <a href="https://www.npmjs.com/package/coolshapes-react"><img src="https://img.shields.io/npm/v/coolshapes-react" alt="npm package"></a> |
| 5 | + |
| 6 | +</p> |
| 7 | + |
| 8 | + |
| 9 | +### What & Why? |
| 10 | +A simple, fun project for the sake of creating some cool-looking abstract shapes with little grainy gradients crafted by [@realvjy](https://x.com/realvjy). Coolshapes is a completely open-source set of 100+ abstract shapes crafted for any design and development projects. Free for both commercial and personal use. Licensed under MIT. |
| 11 | + |
| 12 | + |
| 13 | +## Table of Contents |
| 14 | + |
| 15 | +- [Usage](#usage) |
| 16 | + - [React](#react) |
| 17 | +- [Contributing](#contributing) |
| 18 | +- [Community](#community) |
| 19 | +- [License](#license) |
| 20 | +- [Credits](#credits) |
| 21 | +- [Sponsors](#sponsors) |
| 22 | + |
| 23 | +## Usage |
| 24 | + |
| 25 | +At its core, Coolshapes is a collection of [SVG](https://coolshap.es) files. This means that you can use this in all the same ways you can use SVGs (e.g. `img`, `background-image`, `inline`, `object`, `embed`, `iframe`). |
| 26 | + |
| 27 | +The following are ways you can use Coolshapes. |
| 28 | + |
| 29 | + |
| 30 | + |
| 31 | +# Coolshapes React |
| 32 | + |
| 33 | +Implementation of the coolshapes icon library for react applications. |
| 34 | + |
| 35 | + |
| 36 | +## How to use |
| 37 | + |
| 38 | +It's built with ES modules so it's completely tree-shakable. |
| 39 | +Each icon can be imported as a react component. |
| 40 | + |
| 41 | + |
| 42 | +Implementation of the coolshapes icon library for web applications. |
| 43 | + |
| 44 | +```sh |
| 45 | +npm install coolshapes-react |
| 46 | +``` |
| 47 | + |
| 48 | +or |
| 49 | + |
| 50 | +```sh |
| 51 | +yarn add coolshapes-react |
| 52 | +``` |
| 53 | +### Example |
| 54 | + |
| 55 | +You can pass additional props to adjust the icon. |
| 56 | + |
| 57 | +```js |
| 58 | +import { Coolshape } from 'coolshapes-react'; |
| 59 | + |
| 60 | +const App = () => { |
| 61 | + return <Coolshape type="star" size={48} noise={true} />; |
| 62 | +}; |
| 63 | + |
| 64 | +export default App; |
| 65 | +``` |
| 66 | + |
| 67 | +```js |
| 68 | +import { Star, Ellipse } from 'coolshapes-react'; |
| 69 | + |
| 70 | +const App = () => { |
| 71 | + return <Star index="1" size={48} noise={true} />; |
| 72 | +}; |
| 73 | + |
| 74 | +export default App; |
| 75 | +``` |
| 76 | + |
| 77 | +### Props |
| 78 | + |
| 79 | +| name | data type | default | |
| 80 | +| ------------- | -------- | ------------- | |
| 81 | +| `size` | _Number_ | 200 | |
| 82 | +| `type` | _String_ | currentColor | |
| 83 | +| `noise` | _Boolean_ | true | |
| 84 | +| `index` | _Number_ | random | |
| 85 | + |
| 86 | + |
| 87 | +### Props Value |
| 88 | + |
| 89 | +If using |
| 90 | +```html |
| 91 | +<Coolshape type={star} index={1} size={48} noise={true} /> |
| 92 | +``` |
| 93 | +| type | index | default | |
| 94 | +| ------------- | -------- | ------------- | |
| 95 | +| `star` | 1,2,..4 | random | |
| 96 | +| `ellipse` | 1,2,..12 | random | |
| 97 | + |
0 commit comments