fix shapes view

.github/FUNDING.yml

@@ -1,2 +1,2 @@
 github: realvjy
-buy_me_a_coffee: realvjy
+buy_me_a_coffee: realvjy

.github/workflows/coolshapes.js.yml

@@ -2,21 +2,21 @@ name: Build and test
 
 on:
   push:
-    branches: [ "dev", "main" ]
+    branches: ["dev", "main"]
   pull_request:
-    branches: [ "dev", "main" ]
+    branches: ["dev", "main"]
 
 jobs:
   build:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v3
-    - name: Builds and t
-      uses: actions/setup-node@v3
-      with:
-        node-version: 16.x
-        cache: 'npm'
-    - run: npm ci
-    - run: npm run build
-    - run: npm test
+      - uses: actions/checkout@v3
+      - name: Builds and t
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: "npm"
+      - run: npm ci
+      - run: npm run build
+      - run: npm test

CHANGELOG.md

@@ -1,23 +1,26 @@
 # Changelog
 
 ## 0.0.6-alpha.0
+
 - Add number type shapes, Total count 115
 - Change the index to start from 0
+
 ## 0.0.5-alpha.1
+
 - Add more shapes. Total count 105
 - Fix noise toggle
 
 ## 0.0.5-alpha.0
+
 - Change name to `[email protected]`
 - Fix rendering bugs
 - Added all remaining shapes
 
-
 ## 0.0.4-alpha.0
+
 - Changed versioning to alpha `[email protected]`
 - Added 90+ shapes from different categories
-`Coolshape`, `Ellipse`, `Flower`, `Misc`, `Moon`, `Polygon`, `Rectangle`, `Star`, `Triangle`
-
+  `Coolshape`, `Ellipse`, `Flower`, `Misc`, `Moon`, `Polygon`, `Rectangle`, `Star`, `Triangle`
 
 ## 0.0.3
 
@@ -27,21 +30,20 @@
 ```jsx
     <Coolshape type="star" noise="true">
 ```
-  
+
 ## 0.0.2
 
-- Published -  `[email protected]`
+- Published - `[email protected]`
 - Minor fixes
 
-
 ## 0.0.1 First Publish
 
-- NPM package published -  `react-coolshapes`
+- NPM package published - `react-coolshapes`
 
 - Added these 4 shapes and publish to test on [coolshap.es](https://coolshapes)
-    ```jsx
-        "star-1": ShapeType;
-        "star-2": ShapeType;
-        "circle-1": ShapeType;
-        "circle-2": ShapeType;
-    ```
+  ```jsx
+      "star-1": ShapeType;
+      "star-2": ShapeType;
+      "circle-1": ShapeType;
+      "circle-2": ShapeType;
+  ```

README.md

@@ -1,5 +1,7 @@
 [![Coolshapes](https://coolshap.es/react-preview.jpg)](https://coolshap.es)
+
 # <p align=center>Coolshapes</p>
+
 <p align="center">
   <a href="https://github.com/realvjy/coolshapes-react/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/coolshapes-react" alt="license"></a>
   <a href="https://www.npmjs.com/package/coolshapes-react"><img src="https://img.shields.io/npm/v/coolshapes-react" alt="npm package"></a>
@@ -8,9 +10,8 @@
 
 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.
 
-
-
 ### Table of Contents
+
 - [Installation](#installation)
 - [How to use](#how-to-use)
   - [Global Component](#how-to-use)
@@ -24,10 +25,8 @@ A simple, fun project for the sake of creating some cool-looking abstract shapes
 - [License](https://github.com/realvjy/coolshapes-react?tab=MIT-1-ov-file)
 - [Credits](#credits)
 
-
 ## Installation
 
-
 ```sh
 npm install coolshapes-react
 ```
@@ -43,10 +42,11 @@ yarn add coolshapes-react
 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.
 
 #### Global component example
+
 Just import the Global component `Coolshape` and it will work.
 
 ```js
-import { Coolshape } from 'coolshapes-react';
+import { Coolshape } from "coolshapes-react";
 
 const App = () => {
   return <Coolshape type="star" index={0} size={48} noise={true} />;
@@ -56,22 +56,27 @@ export default App;
 ```
 
 #### Component with shape category example
+
 You can import the component for specific category - `Star`,`Ellipse`... etc - and simply pass the index of the shape.
+
 ```js
-import { Star } from 'coolshapes-react';
+import { Star } from "coolshapes-react";
 
 const App = () => {
   return <Star index={0} size={48} />;
 };
 
 export default App;
 ```
+
 #### Generating random shapes
- 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.
+
+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.
+
 ```js
 // renders a random shape from any category
 const Component = () => {
-  return <Coolshape random={true}/>;
+  return <Coolshape random={true} />;
 };
 // renders a shape from the category star
 const Component2 = () => {
@@ -80,25 +85,31 @@ const Component2 = () => {
 ```
 
 #### Using random shape function
+
 ```js
-import { getRandomShape } from 'coolshapes-react';
+import { getRandomShape } from "coolshapes-react";
 ```
+
 ```js
-getRandomShape() // returns a random shape component
+getRandomShape(); // returns a random shape component
 ```
+
 ```js
-getRandomShape({type:"ellipse"}) // returns a random shape component from the category ellipse
+getRandomShape({ type: "ellipse" }); // returns a random shape component from the category ellipse
 ```
+
 ```js
-getRandomShape({onlyId: true}) // returns shape identifier that can passed as props to the shape component
+getRandomShape({ onlyId: true }); // returns shape identifier that can passed as props to the shape component
 // {shapeType, index}
 ```
+
 ```js
-getRandomShape({onlyId: true, type:"star"}) // returns shape identifier that can passed as props to the shape component
+getRandomShape({ onlyId: true, type: "star" }); // returns shape identifier that can passed as props to the shape component
 // {shapeType: "star", index}
 ```
 
 #### Other Methods
+
 All the components are mapped from object that we have given you access to
 
 ```js
@@ -110,76 +121,79 @@ const shapes = {
 ```
 
 #### Renders the shapes from all catagories
+
 ```jsx
-import { shapes } from 'coolshapes-react'
+import { shapes } from "coolshapes-react";
 
 const ShapeGrid = () => {
   return (
     <>
-      { 
-        Object.keys(shapes).map((shapeType, _) =>{
-        return shapes[shapeType].map((Shape, index)=>{
-          return <Shape size={48}/>
-        })
+      {Object.keys(shapes).map((shapeType, _) => {
+        return shapes[shapeType].map((Shape, index) => {
+          return <Shape size={48} />;
+        });
       })}
     </>
-  )
+  );
 };
-
 ```
+
 ###### syntax
+
 ```js
-shapes[type][index]
+shapes[type][index];
 ```
+
 ```js
-const starComponents = shapes['star']
-const StarComponent1 = starComponents[0]
+const starComponents = shapes["star"];
+const StarComponent1 = starComponents[0];
 ```
 
 ### Props
 
-| name          | data type | default       | description   |
-| ------------- | --------  | ------------- | ------------- |
-| `size`        | _Number_  | 200           | The dimension of shape   |
-| [`type`](#categories)        | _String_  | random        | The category of shapes, if left empty it would randomly select a category. |
-| `noise`       | _Boolean_ | true          | Whether to add noise to the shape or not. |
-| `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.  |
-| `random`     | _Boolean_ | false          | If set true it would select a random component |
+| name                  | data type | default | description                                                                                                                                      |
+| --------------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `size`                | _Number_  | 200     | The dimension of shape                                                                                                                           |
+| [`type`](#categories) | _String_  | random  | The category of shapes, if left empty it would randomly select a category.                                                                       |
+| `noise`               | _Boolean_ | true    | Whether to add noise to the shape or not.                                                                                                        |
+| `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. |
+| `random`              | _Boolean_ | false   | If set true it would select a random component                                                                                                   |
 
 **Notes:**
 Index starts from number 0, so if you want to retrive the first shape of any category, you would use the index number 0.
 
 ### Categories
+
 There are a total of **115** shapes available in Coolshapes under the following categories.
-| name          | count     |
-| ------------- | --------  |
-| `star`        | 13        |  
-| `triangle`    | 14        |  
-| `moon`        | 15        |  
-| `polygon`     | 8         |  
-| `flower`      | 16        |
-| `rectangle`   | 9         |  
-| `ellipse`     | 12        |  
-| `wheel`       | 7         |  
-| `misc`        | 11        |  
-| `number`      | 10        |  
+| name | count |
+| ------------- | -------- |
+| `star` | 13 |  
+| `triangle` | 14 |  
+| `moon` | 15 |  
+| `polygon` | 8 |  
+| `flower` | 16 |
+| `rectangle` | 9 |  
+| `ellipse` | 12 |  
+| `wheel` | 7 |  
+| `misc` | 11 |  
+| `number` | 10 |
 
 **Note:** When importing the components the name would be capitalized, but when passing as prop, the name would be lower case
 
-
-
 ### Others
+
 There are `cjs`, `umd` and `es` included in bundled version of the module,
 
 #### cjs
 
 ```js
-const Coolshapes = require("coolshapes-react")
+const Coolshapes = require("coolshapes-react");
 ```
+
 using with react in the browser
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="UTF-8" />
@@ -189,21 +203,24 @@ using with react in the browser
     <script src="https://unpkg.com/coolshapes-react/dist/umd/coolshapes.js"></script>
   </head>
   <body>
-  <div id="root"></div>
-  <script type="text/babel">
-    const domContainer = document.querySelector('#root');
-    const root = ReactDOM.createRoot(domContainer);
-    const coolshapes = window.coolshapes;
-    const Coolshape = coolshapes.Coolshape;
-    root.render(<Coolshape/>);
-  </script>
+    <div id="root"></div>
+    <script type="text/babel">
+      const domContainer = document.querySelector("#root");
+      const root = ReactDOM.createRoot(domContainer);
+      const coolshapes = window.coolshapes;
+      const Coolshape = coolshapes.Coolshape;
+      root.render(<Coolshape />);
+    </script>
   </body>
 </html>
 ```
+
 ## Figma File
+
 Figma file coming soon on community
 
 ## Contributing
+
 Created by realvjy. You are always welcome to share your feedback on twitter or any social media platform.
 
 If you want to contribute. Just create a [pull request](https://github.com/realvjy/coolshapes-react/pulls).
@@ -212,4 +229,4 @@ If you want to contribute. Just create a [pull request](https://github.com/realv
 
 **Coffee fuels coding ☕️**
 
-<a href="https://www.buymeacoffee.com/realvjy" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
+<a href="https://www.buymeacoffee.com/realvjy" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coolshapes-react",
-  "version": "0.0.6-alpha.0",
+  "version": "0.0.7-alpha.0",
   "description": "A react component library for coolshapes",
   "keywords": [
     "coolshapes",
@@ -75,4 +75,4 @@
     "typescript": "^5.3.3",
     "vitest": "^1.3.1"
   }
-}
+}

src/lib/iconBase.tsx

@@ -23,7 +23,7 @@ export type ShapeType = ForwardRefExoticComponent<ShapeProps>;
 const defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
-  className: "coolshape",
+  className: "coolshapes",
   viewBox: "0 0 200 200",
   width: 200,
   height: 200,