You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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
26
31
-
# Coolshapes React
32
27
33
-
Implementation of the coolshapes icon library for react applications.
28
+
## Installation
34
29
35
30
36
-
## How to use
37
-
38
-
39
-
Implementation of the coolshapes icon library for web applications.
40
-
41
31
```sh
42
32
npm install coolshapes-react
43
33
```
@@ -47,9 +37,13 @@ or
47
37
```sh
48
38
yarn add coolshapes-react
49
39
```
50
-
### Example
51
40
52
-
There's a global component and component for each category of shapes. You can pass additional props to adjust the shape. These components extend from SVG elements, so they support all the props available in a SVG element.
41
+
## How to use
42
+
43
+
There are two types of components available in **Coolshapes**, which you can use: **Global component** and **Component with a category of shapes**. Then, you can pass additional [props](#props) to adjust the shapes and their properties available on Coolshapes SVG elements.
44
+
45
+
#### Global component example
46
+
Just import the Global component `Coolshape` and it will work.
53
47
54
48
```js
55
49
import { Coolshape } from'coolshapes-react';
@@ -61,7 +55,8 @@ const App = () => {
61
55
exportdefaultApp;
62
56
```
63
57
64
-
You can import the component for specific category and simply pass the index of the shape.
58
+
#### Component with shape category example
59
+
You can import the component for specific category - `Star`,`Ellipse`... etc - and simply pass the index of the shape.
65
60
```js
66
61
import { Star } from'coolshapes-react';
67
62
@@ -71,7 +66,7 @@ const App = () => {
71
66
72
67
exportdefaultApp;
73
68
```
74
-
#### Generating random shapes.
69
+
#### Generating random shapes
75
70
setting the `random`[prop](#props) to true or leaving the `index` or `type` prop empty would replace the shape with a random shape every time it renders.
76
71
```js
77
72
// renders a random shape from any category
@@ -84,7 +79,7 @@ const Component2 = () => {
84
79
};
85
80
```
86
81
87
-
Using random shape function.
82
+
#### Using random shape function
88
83
```js
89
84
import { getRandomShape } from'coolshapes-react';
90
85
```
@@ -103,8 +98,8 @@ getRandomShape({onlyId: true, type:"star"}) // returns shape identifier that can
103
98
// {shapeType: "star", index}
104
99
```
105
100
106
-
#### others
107
-
all the components are mapped from object that we have given you access to
101
+
#### Other Methods
102
+
All the components are mapped from object that we have given you access to
|[`type`](#categories)|_String_| random | The category of shapes, if left empty it would randomly select a category. |
150
145
|`noise`|_Boolean_| true | Whether to add noise to the shape or not. |
151
-
|`index`|_Number_| random | The index of shape within the shape [category](#categories), it will randomly select a shape from the category if type prop given |
146
+
|`index`|_Number_| random | The index of shape within the shape [category](#categories), it will randomly select a shape from the category if type prop given. Start from 0.|
152
147
|`random`|_Boolean_| false | If set true it would select a random component |
153
148
154
-
Notes:
155
-
-Index starts from number 0, so if you want to retrive the first shape of any category, you would use the index number 0.
149
+
**Notes:**
150
+
Index starts from number 0, so if you want to retrive the first shape of any category, you would use the index number 0.
156
151
157
152
### Categories
158
-
159
-
|type|shapes|
153
+
There are a total of **115** shapes available in Coolshapes under the following categories.
154
+
|name|count |
160
155
| ------------- | -------- |
161
-
|`star`| 12 |
156
+
|`star`| 13 |
157
+
|`triangle`| 14 |
158
+
|`moon`| 15 |
159
+
|`polygon`| 8 |
160
+
|`flower`| 16 |
161
+
|`rectangle`| 9 |
162
162
|`ellipse`| 12 |
163
+
|`wheel`| 7 |
164
+
|`misc`| 11 |
165
+
|`number`| 10 |
166
+
167
+
**Note:** If you're importing directly as component, the name must be in Title case. And the category type it will be lowercase.
168
+
163
169
164
170
165
-
### others
166
-
we have have provide the `cjs`, `umd` and `es`build versions of the module,
171
+
### Others
172
+
There are `cjs`, `umd` and `es`included in bundled versions of the module,
167
173
168
174
#### cjs
169
175
170
176
```js
171
-
constCoolshapes=reqiore("coolshapes-react")
177
+
constCoolshapes=require("coolshapes-react")
172
178
```
173
179
using with react in the browser
174
180
@@ -180,7 +186,7 @@ using with react in the browser
@@ -194,3 +200,16 @@ using with react in the browser
194
200
</body>
195
201
</html>
196
202
```
203
+
## Figma File
204
+
Figma file coming soon on community
205
+
206
+
## Contributing
207
+
Created by realvjy. You are always welcome to share your feedback on twitter or any social media platform.
208
+
209
+
If you want to contribute. Just create a [pull request](https://github.com/realvjy/coolshapes-react/pulls).
210
+
211
+
## Support & Donation
212
+
213
+
**Coffee fuels coding ☕️**
214
+
215
+
<ahref="https://www.buymeacoffee.com/realvjy"target="_blank"><imgsrc="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"alt="Buy Me A Coffee"style="height: 60px!important;width: 217px!important;" ></a>
0 commit comments