Skip to content
Cute SVG React Components
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Including all sections Jul 29, 2018
native React native #74 Jun 11, 2019
sketch Updating design Jun 11, 2019
src Exporting Chocolate component Feb 11, 2020
styleguide/components fix: typo Apr 18, 2019
.babelrc Add babel-cli and ES6 build using Babel CLI Dec 14, 2018
.eslintrc eslint config Aug 17, 2018
.gitignore Minor fixes Feb 11, 2020
.npmignore Rn npm fixes (#76) Jun 12, 2019
.prettierrc eslint config Aug 17, 2018
README.md Minor fixes Feb 11, 2020
humans.txt
license license May 4, 2017
package-lock.json 0.16.0 Feb 11, 2020
package.json 0.16.0 Feb 11, 2020
robots.txt Moved from reaclux to reactatouille-boilerplate Jan 27, 2017
styleguide.config.js Updating website Jan 26, 2019
webpack.config.js add fix webpack adding window object to output of package Jan 11, 2019

README.md

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
  • 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.

You can’t perform that action at this time.