Shape.so Library

1000+ Customizable, animated icons & illustrations. Shape lets you customize the style, colors and border of static & animated icons and illustrations.

For the full list of icons/illustrations, please head over to Shape.so

Install

npm install --save shape-library

Import

import Shape from 'shape-library';

Props

| Prop | Type | Default | Description | | --------------- | :------: | :------: | ------------------------------------------------------------------------------------ | | type | string | icons | Specifies between rendering an icon or an illustration | | category | string | simple | The type of icons/illustrations. Example: Color, Bold-Filled, Object, Elements | | name | string | lock | The name of the icons/illustrations. Example: lock, home, bookmark | | primaryColor | string | #000 | Hex colors, rgba, and browser supported colors. The fill for the icons/illustrations | | secondaryColors | string | #000 | Hex colors, rgba, and browser supported colors. The fill for the icons/illustrations | | backgroundColor | string | none | Hex colors, rgba, and browser supported colors | | theme | number | 0 | Enter a number from 1-8 to specify each themes. See chart below for specific colors | | size | number | 24 | Changes the width and height of the icon/illustrations | | borderRadius | number | 0 | Changes the rx on the <rect/> element |

Theme Colors

const themeOne = {
  primaryColor: '#FF5E5E',
  secondaryColor: '#1B5C6A'
};

const themeTwo = {
  primaryColor: '#FCAACF',
  secondaryColor: '#2249B3'
};

const themeThree = {
  primaryColor: '#193170',
  secondaryColor: '#2357DD'
};

const themeFour = {
  primaryColor: '#F8B500',
  secondaryColor: '#5E227F'
};
const themeFive = {
  primaryColor: '#FFB6B6',
  secondaryColor: '#139DB8'
};

const themeSix = {
  primaryColor: '#FFD06F',
  secondaryColor: '#28323F'
};

const themeSeven = {
  primaryColor: '#07038C',
  secondaryColor: '#F20505'
};

How To Use - Icons

import React from 'react';

import Shape from 'shape-library';

const App = () => {
  return (
    <Shape
      type='icons'
      category='color'
      name='lock'
      theme={1}
      size={100}
      backgroundColor='black'
      borderRadius={5}
    />
  );
};

export default App;

How To Use - Illustrations

import React from 'react';

import Shape from 'shape-library';

const App = () => {
  return <Shape type='illustrations' category='abstract' name='code' size={900} theme={1} />;
};

export default App;

License

MIT © ThatGalNatalie