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

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.

Comments

  • Bump codemirror from 5.42.0 to 5.61.0
    Bump codemirror from 5.42.0 to 5.61.0

    May 12, 2021

    Bumps codemirror from 5.42.0 to 5.61.0.

    Release notes

    Sourced from codemirror's releases.

    5.61.0

    Version 5.61.0

    Bug fixes

    Improve support for being in a shadow DOM in contenteditable mode.

    Prevent line number from being read by screen readers.

    show-hint addon: Fix a crash caused by a race condition.

    javascript mode: Improve scope tracking.

    New features

    The library now emits an "updateGutter" event when the gutter width changes.

    emacs bindings: Provide named commands for all bindings.

    5.60.0

    Version 5.60.0

    Bug fixes

    Fix autofocus feature in contenteditable mode.

    simple mode addon: Fix a null-dereference crash.

    multiplex addon: Make it possible to use parseDelimiters when both delimiters are the same.

    julia mode: Fix a lockup bug.

    New features

    setSelections now allows ranges to omit the head property when it is equal to anchor.

    sublime bindings: Add support for reverse line sorting.

    5.59.4

    Version 5.59.4

    Bug fixes

    Give the scrollbar corner filler a background again, to prevent content from peeping through between the scrollbars.

    5.59.3

    ... (truncated)

    Changelog

    Sourced from codemirror's changelog.

    5.61.0 (2021-04-20)

    Bug fixes

    Improve support for being in a shadow DOM in contenteditable mode.

    Prevent line number from being read by screen readers.

    show-hint addon: Fix a crash caused by a race condition.

    javascript mode: Improve scope tracking.

    New features

    The library now emits an "updateGutter" event when the gutter width changes.

    emacs bindings: Provide named commands for all bindings.

    5.60.0 (2021-03-20)

    Bug fixes

    Fix autofocus feature in contenteditable mode.

    simple mode addon: Fix a null-dereference crash.

    multiplex addon: Make it possible to use parseDelimiters when both delimiters are the same.

    julia mode: Fix a lockup bug.

    New features

    setSelections now allows ranges to omit the head property when it is equal to anchor.

    sublime bindings: Add support for reverse line sorting.

    5.59.4 (2021-02-24)

    Bug fixes

    Give the scrollbar corner filler a background again, to prevent content from peeping through between the scrollbars.

    5.59.3 (2021-02-20)

    Bug fixes

    Don't override the way zero-with non-joiners are rendered.

    Fix an issue where resetting the history cleared the undoDepth option's value.

    ... (truncated)

    Commits
    • eac70bb Mark version 5.61.0
    • 97ee575 [emacs bindings] Define named commands for the key bindings
    • 86af2dc [show-hint addon] Fix race condition in scroll measurement
    • f3033a2 Send new "updateGutter" signal on gutter resize
    • a8f5286 [runmode] Export countColumn on the minimal CodeMirror
    • 123c670 [anywordhint demo] Update to show current code
    • 2997167 Prevent line numbers from being voiced by screen readers
    • 770433e Use shadow DOM aware activeElement in contenteditable mode
    • 8abe468 [r mode] Tweak regex for dots
    • 7b9f8a6 [r mode] Remove extra test with more appropriate regexp
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump dns-packet from 1.3.1 to 1.3.4
    Bump dns-packet from 1.3.1 to 1.3.4

    May 28, 2021

    Bumps dns-packet from 1.3.1 to 1.3.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump postcss from 7.0.6 to 7.0.36
    Bump postcss from 7.0.6 to 7.0.36

    Jun 16, 2021

    Bumps postcss from 7.0.6 to 7.0.36.

    Release notes

    Sourced from postcss's releases.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.

    7.0.35

    7.0.34

    • Fix compatibility with postcss-scss 2.

    7.0.33

    • Add error message for PostCSS 8 plugins.

    7.0.32

    7.0.31

    • Use only the latest source map annotation (by @​emzoumpo).

    7.0.30

    • Fix TypeScript definition (by @​nex3)

    7.0.29

    • Update Processor#version.

    7.0.28

    • Fix TypeScript definition (by @​nex3).

    7.0.27

    • Fix TypeScript definition (by @​nex3).

    7.0.26

    • Fix TypeScript definition (by @​nex3)

    7.0.25

    • Fix absolute path support for Windows (by @​tomrav)

    7.0.24

    7.0.23

    • Update Processor#version.

    7.0.22

    • Add funding link for npm fund.

    7.0.21

    • Revert passing nodes property to node constructor.

    7.0.20

    • Allow to pass PostCSS’s nodes in nodes property to node constructor.

    ... (truncated)

    Changelog

    Sourced from postcss's changelog.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.

    7.0.35

    • Add migration guide link to PostCSS 8 error text.

    7.0.34

    • Fix compatibility with postcss-scss 2.

    7.0.33

    • Add error message for PostCSS 8 plugins.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.

    7.0.35

    • Add migration guide link to PostCSS 8 error text.

    7.0.34

    • Fix compatibility with postcss-scss 2.

    7.0.33

    • Add error message for PostCSS 8 plugins.

    7.0.32

    7.0.31

    • Use only the latest source map annotation (by Emmanouil Zoumpoulakis).

    7.0.30

    • Fix TypeScript definition (by Natalie Weizenbaum).

    7.0.29

    • Update Processor#version.

    7.0.28

    • Fix TypeScript definition (by Natalie Weizenbaum).

    7.0.27

    • Fix TypeScript definition (by Natalie Weizenbaum).

    7.0.26

    • Fix TypeScript definition (by Natalie Weizenbaum).

    7.0.25

    • Fix absolute path support for Windows (by Tom Raviv).

    7.0.24

    • Fix TypeScript definition (by Keith Cirkel).

    ... (truncated)

    Commits
    • 67e3d7b Release 7.0.36 version
    • 54cbf3c Backport ReDoS vulnerabilities from PostCSS 8
    • 12832f3 Release 7.0.35 version
    • 4455ef6 Use OpenCollective in funding
    • e867c79 Add migration guide to PostCSS 8 error
    • 32a22a9 Release 7.0.34 version
    • 2293982 Lock build targets
    • 2c3a111 Release 7.0.33 version
    • 4105f21 Use yaspeller instead of yaspeller-ci
    • c8d02a0 Revert yaspeller-ci removal
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump path-parse from 1.0.5 to 1.0.7
    Bump path-parse from 1.0.5 to 1.0.7

    Aug 11, 2021

    Bumps path-parse from 1.0.5 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump url-parse from 1.4.4 to 1.5.3
    Bump url-parse from 1.4.4 to 1.5.3

    Oct 6, 2021

    Bumps url-parse from 1.4.4 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • react native app on IOS crashed
    react native app on IOS crashed

    Nov 24, 2021

    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

    Reply
  • Package components as ES6 classes
    Package components as ES6 classes

    Nov 13, 2018

    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.

    Reply
  • added File component
    added File component

    Jan 8, 2019

    Is there any chance to see this sweet File get in the team ?

    Reply
  • The Speech is not working as expected
    The Speech is not working as expected

    Apr 24, 2018

    The Speech Bubble is not working as expected.

    screen shot 2018-04-24 at 5 15 57 pm

    Reply
  • Landing Page Design
    Landing Page Design

    Oct 1, 2018

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

    Reply
  • Works in React Native?
    Works in React Native?

    Apr 2, 2018

    Hi! This library work with React Native?

    Reply
  • More components?
    More components?

    May 1, 2017

    Hi!

    This is amazing!

    Are you gonna make any more components? Want help?

    Reply