coolshapes-react

Coolshapes

What & Why?

A simple, fun project for the sake of creating some cool-looking abstract shapes with little grainy gradients crafted by @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

• Usage
  • React
• Contributing
• Community
• License
• Credits
• Sponsors

Usage

At its core, Coolshapes is a collection of SVG 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).

The following are ways you can use Coolshapes.

Coolshapes React

Implementation of the coolshapes icon library for react applications.

How to use

It's built with ES modules so it's completely tree-shakable. Each icon can be imported as a react component.

Implementation of the coolshapes icon library for web applications.

npm install coolshapes-react

or

yarn add coolshapes-react

Example

You can pass additional props to adjust the icon.

import { Coolshape } from 'coolshapes-react';

const App = () => {
  return <Coolshape type="star" size={48} noise={true} />;
};

export default App;

import { Star, Ellipse } from 'coolshapes-react';

const App = () => {
  return <Star index="1" size={48} noise={true} />;
};

export default App;

Props

name	data type	default
size	Number	200
type	String	currentColor
noise	Boolean	true
index	Number	random

Props Value

If using

<Coolshape type={star} index={1} size={48} noise={true} />

type	index	default
star	1,2,..4	random
ellipse	1,2,..12	random

Changelog

0.0.5-alpha.1

• Add more shapes. Total count 105
• Fix noise toggle