1.0.7 • Published 4 years ago

shape-library v1.0.7

Weekly downloads
12
License
MIT
Repository
github
Last release
4 years ago

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

NPM JavaScript Style Guide

Shape.so Icon Editor

Install

npm install --save shape-library

Import

import Shape from 'shape-library';

Props

PropTypeDefaultDescription
typestringiconsSpecifies between rendering an icon or an illustration
categorystringsimpleThe type of icons/illustrations. Example: Color, Bold-Filled, Object, Elements
namestringlockThe name of the icons/illustrations. Example: lock, home, bookmark
primaryColorstring#000Hex colors, rgba, and browser supported colors. The fill for the icons/illustrations
secondaryColorsstring#000Hex colors, rgba, and browser supported colors. The fill for the icons/illustrations
backgroundColorstringnoneHex colors, rgba, and browser supported colors
themenumber0Enter a number from 1-8 to specify each themes. See chart below for specific colors
sizenumber24Changes the width and height of the icon/illustrations
borderRadiusnumber0Changes 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