Giter Club home page Giter Club logo

react-kawaii's Introduction

React Kawaii

React Kawaii is a library of cute SVG illustrations (react components). Ideal if you want to give some cuteness and personality to your react application.

Version npm

Example

React Kawaii Example

Install

With npm:

npm install --save react-kawaii

With yarn:

yarn add react-kawaii

How to use

import { Planet } from 'react-kawaii';

const Example = () => <Planet size={200} mood="blissful" color="#FDA7DC" />;

How to use with React Native

import { Planet } from 'react-kawaii/lib/native/';

const Example = () => <Planet size={200} mood="blissful" color="#FDA7DC" />;

Depending on your react and react-native version, you might need to to install the package react-native-svg:

With npm:

npm install react-native-svg

With yarn:

yarn add react-native-svg

Link react-native:

react-native link react-native-svg

Read the react-native-svg documentation in case you need help.

Development

So you want to help developing some cute UI components?

If you want to develop a component

  • npm i

  • npm run styleguide

If you want to build

  • npm run styleguide:build

Documentation

See https://react-kawaii.now.sh/

Components

All the components are SVG illustrations. You can pick different moods: sad, shocked, happy, blissful and lovestruck. You can also choose a color to your Kawaii and the size.

Available components:

  • Backpack - A cute backpack
  • Browser - A cute browser
  • Cat - A cute cat
  • Chocolate - A cute chocolate
  • CreditCard - A cute credit card
  • File - A cute file
  • Folder - A cute folder
  • Ghost - A cute ghost
  • IceCream - A cute ice-cream
  • Mug - A cute mug
  • Planet - A cute planet
  • SpeechBubble - A cute speech bubble
  • More Kawaii components coming soon...

Contributors

Thanks to everyone who has contributed to this project! You can find the contributors list here.

react-kawaii's People

Contributors

aliciacatalina avatar codenakama avatar dependabot[bot] avatar eliasparis avatar iaurg avatar kombucha avatar lachlanjc avatar langoliver avatar miukimiu avatar pducolin avatar saravieira avatar sueannioanis avatar txbrown avatar uselessdev avatar vinnl avatar yuanchuan avatar yuriettys avatar zhangyijiang avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.