miukimiu / react-kawaii

Cute SVG React Components

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.

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 Issues

React does not recognize the hoverState and showTextOnHover props

Chrome console errors while running "react": "^16.3.2":

index.js:2178 Warning: React does not recognize the hoverStateprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasehoverstate instead. If you accidentally passed it from a parent component, remove it from the DOM element.

React does not recognize the showTextOnHoverprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseshowtextonhover instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Add a stack of new faces.

Hi @miukimiu !
I was spinning around here and came into my mind the idea of using some of the kawaii components but with a kind of dizzy or shocked face (like for a 404 error page or something). Right after I realized that it would be awesome to have a full emojipedia faces styled available in this project.

That for, I would like to add some new styled faces to it.
My doubts are:

• Maybe lots of emoji faces are out of scope of kawaii as they are not exactly "cute".
• The more the faces the bigger the file. Maybe it leads to an unreadable Face component in the end.

Cheers!

Works in React Native?

Hi! This library work with React Native?

Possible to use Just the eyes and the mouth?

HI @miukimiu
Is it possible to use just the eyes and mouth as an overlay on a background image?

Why is this a dev dependency?

Hi. I noticed the instructions say to install this module with npm install --save-dev. Shouldn't this be npm install?

Check the style prop

The warning

(https://github.com/miukimiu/react-kawaii/blob/master/src/common/wrapper/Wrapper.jsx#L62)

Possible workaround

1. Accept any type of value

{
  style: PropTypes.any
}

2. Using a complex rule

{
  style: PropTypes.objectOf(
    PropTypes.oneOfType([
      PropTypes.string, PropTypes.number
    ])
  )
}

3. Using a third-party module
https://www.npmjs.org/package/react-style-proptype

{
  style: stylePropType
}

The Speech is not working as expected

The Speech Bubble is not working as expected.

More components?

Hi!

This is amazing!

Are you gonna make any more components? Want help?

TypeScript declaration files

Hi,

I have been adding some "kawaii-ness" to a typescript project that I am working on, but have run into a small problem - there is no TypeScript declaration file for react-kawaii. I have built a custom declaration file that defines only the components that I am using as a work-around. Are there any plans to add a declaration file in the near future?

Add a face for musical projects

Hello,
Thank you for this great library.

Our musical startup uses it in an open-source project named OpenJam. :)

Speaking of music, would it be possible to add a musical instrument? I imagined a paperclip / trombone like Microsoft's Clippy... or maybe a synthesizer.

What do you think?

Package components as ES6 classes

Currently because of the way this library is packaged as UMD, importing any component from the library will cause the all components to be imported. It would be great if the components can also be built as ES6 and made available under the modules entry point in package.json so that ES6 aware bundlers can shake away unused components.

Feature request - extend animation

Extend elements so they take props like eyes, mouth and nose in order to extend animations to control each element more accurately.

I suppose using a className to target each element works, but it's not declarative nor dynamic.

What do you think?

Apologies if this is already implemented but I couldn't find any documentation on how to animate and the cds link is broken

Import not working when using react-native, workaround included.

Hello :)

When using the library with Expo like so:

expo init kawaiitest
cd kawaiitest
yarn add https://github.com/miukimiu/react-kawaii.git#new-site-and-react-native

Adding this to the main page:

import { Planet } from 'react-kawaii/native';
const Example = () => <Planet size={200} mood="blissful" color="#FDA7DC" />;

There is an import error on this line:

react-kawaii/native/components/common/face/Face.js

Line 4 in 9ca38dc

import paths from 'react-native-kawaii/src/components/common/face/paths';

If you modify that line to read:

import paths from 'react-kawaii/src/components/common/face/paths';

Everything works fine, am I importing things wrong or is this a bug?

For videogames

This one is so cute for videogames. :)

https://codepen.io/Nancy_GTR/pen/zbeqKj

Dependency Conflict installing kawaii

How does one resolve this dependency error in order to use react-kawaii

$ npm i react-kawaii
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"15.3.0 - 16.x" from [email protected]
npm ERR! node_modules/react-kawaii
npm ERR!   react-kawaii@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/kingram/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/kingram/.npm/_logs/2021-03-30T02_46_24_195Z-debug.log

Bump version + push to NPM?

I'm trying to use this in a Next.js project and I can't because window is not defined in development. There's certainly ways around this. It looks like this issue has been addressed in later versions of your package, but the later versions haven't been updated.

Is there any chance you could upload the latest version to NPM?

react native app on IOS crashed

My native react app keep crashed.
After a few days of debugging, I realized that this was caused by the lack of id attribute on the Mask tag of SpeechBubble

<Mask fill="#fff">...

I think that on new versions of react-native-svg the id-attribut is required for the Mask

react-native-svg: 12.1.1

Dinosaur component is missing

I went to the page at https://react-kawaii.now.sh/ and saw a cute dinosaur, but couldn't find it as one of the components. :(

Add support for server side rendered apps

Currently the package blows up when importing on a server-side rendered framework such as Nextjs.
ReferenceError: window is not defined

I am also curious about the dependency on the window object considering that its just a "dumb" component. @miukimiu I'll investigate this soon.

File component path is not centered

Hi, first let me say thanks for the great library!

As you can see in this sandbox, unlike any other component, File is not centered (contains a lot of whitespace on its right). Is there any way to remove the whitespace programmaticaly?

Sleepy and dizzy faces

Hi,

It would be nice to have sleepy and dizzy faces :)

Maybe I could contribute

React 18 support

To install react-kawaii when using the two latest major releases of react requires you to use npm install react-kawaii --legacy-peer-deps. It would be great if we could bump dependency requirements so it can be installed by npm install react-kawaii. I can supply a PR!

Shouldn't the kawaii face be a separated component ?

I understand that some character might have different faces. But for those that share the same, it would be good to have a separated component to avoid duplicated code.

If there isn't a reason to each character having its own implementation, I would gladly do a PR for it.

Is Yarn or npm preferred?

The repo currently has both yarn.lock and package-lock.json. It is not a good idea to use both since they may go out of sync - can I check which is preferred, and have the lockfile used by the other package manager deleted?

Landing Page Design

Design:
https://invis.io/ASMQP3GD8TB#/293382879_React-Kawaii_Landing

Cute Favicon missing 🦕

It's hard to accept that the cutest docs ever don't have a dino favicon 😸

Kawaii with animation for a loading screen

@miukimiu can we have a kawaii face with an animation so we can use it in loading screens? For example when uploading a file to a server.

Thanks