├── .circleci └── config.yml ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .prettierrc ├── README.MD ├── lerna.json ├── now.json ├── package.json ├── packages ├── vue-kawaii-docs │ ├── docs │ │ ├── .vuepress │ │ │ └── config.js │ │ └── readme.md │ ├── package.json │ └── vue-kawaii-logo.png └── vue-kawaii │ ├── package.json │ ├── rollup.config.js │ └── src │ ├── components │ ├── backpack │ │ ├── Backpack.vue │ │ └── paths.js │ ├── browser │ │ ├── Browser.vue │ │ └── paths.js │ ├── cat │ │ ├── Cat.vue │ │ └── paths.js │ ├── common │ │ ├── face │ │ │ ├── Face.vue │ │ │ └── paths.js │ │ └── wrapper │ │ │ └── Wrapper.js │ ├── creditCard │ │ ├── CreditCard.vue │ │ └── paths.js │ ├── ghost │ │ ├── Ghost.vue │ │ └── paths.js │ ├── iceCream │ │ ├── IceCream.vue │ │ └── paths.js │ ├── mug │ │ ├── Mug.vue │ │ └── paths.js │ ├── planet │ │ ├── Planet.vue │ │ └── paths.js │ └── speechBubble │ │ ├── SpeechBubble.vue │ │ └── paths.js │ ├── main.js │ └── utils │ └── getUniqueId.js └── yarn.lock /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | jobs: 3 | build: 4 | docker: 5 | - image: circleci/node:10 6 | working_directory: ~/repo 7 | steps: 8 | - checkout 9 | - run: 10 | name: Installing dependencies 11 | command: yarn install 12 | - run: 13 | name: Linting 14 | command: yarn lint 15 | - run: 16 | name: Build 17 | command: yarn build 18 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | charset = utf-8 7 | trim_trailing_whitespace = false 8 | insert_final_newline = false -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true, 6 | }, 7 | parserOptions: { 8 | parser: 'babel-eslint', 9 | }, 10 | extends: [ 11 | 'eslint:recommended', 12 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 13 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 14 | 'plugin:vue/recommended', 15 | 'plugin:prettier/recommended', 16 | ], 17 | // required to lint *.vue files 18 | plugins: ['vue'], 19 | // add your custom rules here 20 | rules: { 21 | semi: [2, 'never'], 22 | 'no-console': 'off', 23 | 'vue/max-attributes-per-line': 'off', 24 | 'prettier/prettier': ['error'], 25 | }, 26 | } 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ### Code ### 2 | # Visual Studio Code - https://code.visualstudio.com/ 3 | .settings/ 4 | .vscode/ 5 | tsconfig.json 6 | jsconfig.json 7 | 8 | ### macOS ### 9 | # General 10 | .DS_Store 11 | .AppleDouble 12 | .LSOverride 13 | 14 | # Icon must end with two \r 15 | Icon 16 | 17 | # Thumbnails 18 | ._* 19 | 20 | # Files that might appear in the root of a volume 21 | .DocumentRevisions-V100 22 | .fseventsd 23 | .Spotlight-V100 24 | .TemporaryItems 25 | .Trashes 26 | .VolumeIcon.icns 27 | .com.apple.timemachine.donotpresent 28 | 29 | # Directories potentially created on remote AFP share 30 | .AppleDB 31 | .AppleDesktop 32 | Network Trash Folder 33 | Temporary Items 34 | .apdisk 35 | 36 | ### Node ### 37 | # Logs 38 | logs 39 | *.log 40 | npm-debug.log* 41 | yarn-debug.log* 42 | yarn-error.log* 43 | 44 | # Runtime data 45 | pids 46 | *.pid 47 | *.seed 48 | *.pid.lock 49 | 50 | # Directory for instrumented libs generated by jscoverage/JSCover 51 | lib-cov 52 | 53 | # Coverage directory used by tools like istanbul 54 | coverage 55 | 56 | # nyc test coverage 57 | .nyc_output 58 | 59 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 60 | .grunt 61 | 62 | # Bower dependency directory (https://bower.io/) 63 | bower_components 64 | 65 | # node-waf configuration 66 | .lock-wscript 67 | 68 | # Compiled binary addons (https://nodejs.org/api/addons.html) 69 | build/Release 70 | 71 | # Dependency directories 72 | node_modules/ 73 | jspm_packages/ 74 | 75 | # TypeScript v1 declaration files 76 | typings/ 77 | 78 | # Optional npm cache directory 79 | .npm 80 | 81 | # Optional eslint cache 82 | .eslintcache 83 | 84 | # Optional REPL history 85 | .node_repl_history 86 | 87 | # Output of 'npm pack' 88 | *.tgz 89 | 90 | # Yarn Integrity file 91 | .yarn-integrity 92 | 93 | # dotenv environment variables file 94 | .env 95 | 96 | # parcel-bundler cache (https://parceljs.org/) 97 | .cache 98 | 99 | # next.js build output 100 | .next 101 | 102 | # nuxt.js build output 103 | .nuxt 104 | 105 | # vuepress build output 106 | .vuepress/dist 107 | 108 | # Serverless directories 109 | .serverless 110 | 111 | dist -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "trailingComma": "all" 5 | } 6 | -------------------------------------------------------------------------------- /README.MD: -------------------------------------------------------------------------------- 1 | # Vue Kawaii 2 | 3 |
4 | 5 |
6 | 7 | [![CircleCI](https://circleci.com/gh/youngtailors/vue-kawaii.svg?style=svg)](https://circleci.com/gh/youngtailors/vue-kawaii) [![codecov](https://codecov.io/gh/youngtailors/vue-kawaii/branch/master/graph/badge.svg)](https://codecov.io/gh/youngtailors/vue-kawaii) [![dependencies Status](https://david-dm.org/youngtailors/vue-kawaii/status.svg)](https://david-dm.org/youngtailors/vue-kawaii) [![devDependencies Status](https://david-dm.org/youngtailors/vue-kawaii/dev-status.svg)](https://david-dm.org/youngtailors/vue-kawaii?type=dev) 8 | 9 | Vue Kawaii is a fork of [React Kawaii](https://github.com/miukimiu/react-kawaii). The library of cute SVG illustrations (Vue components). Ideal if you want to give some cuteness and personality to your Vue application. 10 | 11 | ## Packages 12 | 13 | | Package | Version | 14 | | --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | 15 | | **[vue-kawaii](/packages/vue-kawaii)** | [![npm](https://img.shields.io/npm/v/vue-kawaii.svg?style=flat-square)](https://www.npmjs.com/package/vue-kawaii) | 16 | | **[vue-kawaii-example](/packages/vue-kawaii-docs)** | [![npm](https://img.shields.io/npm/v/vue-kawaii-docs.svg?style=flat-square)](https://www.npmjs.com/package/vue-kawaii-docs) | 17 | 18 | ## Install from NPM 19 | 20 | ```bash 21 | npm install --save-dev vue-kawaii 22 | ``` 23 | 24 | ## Install from Yarn 25 | 26 | ```bash 27 | yarn add vue-kawaii 28 | ``` 29 | 30 | ## Import it into your code: 31 | 32 | ```javascript static 33 | import { Planet } from 'vue-kawaii' 34 | 35 | export { 36 | name: 'Example' 37 | components: { 38 | Planet 39 | } 40 | } 41 | ``` 42 | 43 | ### Components 44 | 45 | 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. 46 | 47 | Available components: 48 | 49 | - [x] Backpack - A cute backpack 50 | - [x] Browser - A cute browser 51 | - [x] CreditCard - A cute credit card 52 | - [x] Ghost - A cute ghost 53 | - [x] IceCream - A cute ice-cream 54 | - [x] Mug - A cute mug 55 | - [x] Planet - A cute planet 56 | - [x] SpeechBubble - A cute speech bubble 57 | - [x] More Kawaii components coming soon... 58 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "npmClient": "yarn", 3 | "useWorkspaces": true, 4 | "packages": ["packages/*"], 5 | "version": "0.1.2" 6 | } 7 | -------------------------------------------------------------------------------- /now.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-kawaii", 3 | "alias": "vue-kawaii", 4 | "version": 2, 5 | "builds": [ 6 | { 7 | "src": "package.json", 8 | "use": "@now/static-build", 9 | "config": { "distDir": "packages/vue-kawaii-docs/docs/.vuepress/dist" } 10 | } 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "root", 3 | "private": true, 4 | "workspaces": [ 5 | "packages/*" 6 | ], 7 | "devDependencies": { 8 | "babel-eslint": "^10.0.1", 9 | "eslint": "^5.11.0", 10 | "eslint-config-prettier": "^3.3.0", 11 | "eslint-plugin-prettier": "^3.0.0", 12 | "eslint-plugin-vue": "^5.0.0", 13 | "husky": "^1.2.1", 14 | "lerna": "^3.8.0", 15 | "lint-staged": "^8.1.0", 16 | "rimraf": "^2.6.2", 17 | "rollup": "^0.68.2", 18 | "rollup-plugin-babel": "^4.1.0", 19 | "rollup-plugin-buble": "^0.19.6", 20 | "rollup-plugin-commonjs": "^9.2.0", 21 | "rollup-plugin-node-resolve": "^4.0.0", 22 | "rollup-plugin-uglify": "^6.0.0", 23 | "rollup-plugin-vue": "^4.3.2", 24 | "vue": "^2.5.21", 25 | "vuepress": "^1.0.0-alpha.30" 26 | }, 27 | "scripts": { 28 | "build": "lerna run build", 29 | "now-build": "lerna run --scope vue-kawaii-docs build", 30 | "clean": "rimraf packages/**/dist", 31 | "test": "jest", 32 | "prebuild": "yarn clean", 33 | "dev": "lerna run --parallel dev", 34 | "setup": "lerna clean --yes && yarn install", 35 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 36 | "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .", 37 | "bump": "lerna publish" 38 | }, 39 | "dependencies": {}, 40 | "husky": { 41 | "hooks": { 42 | "pre-commit": "lint-staged" 43 | } 44 | }, 45 | "lint-staged": { 46 | "linters": { 47 | "*.{vue,js}": [ 48 | "yarn lintfix", 49 | "git add" 50 | ], 51 | "*.{md,json}": [ 52 | "prettier --write", 53 | "git add" 54 | ] 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /packages/vue-kawaii-docs/docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | title: 'Vue Kawaii', 5 | themeConfig: { 6 | nav: [ 7 | { text: 'Home', link: '/' }, 8 | { text: 'Github', link: 'https://github.com/youngtailors/vue-kawaii' }, 9 | ], 10 | }, 11 | plugins: [ 12 | [ 13 | 'component-docgen', 14 | { 15 | rootDir: path.join(__dirname, '../../../vue-kawaii/src/components'), 16 | exclude: '**/common/**/*', 17 | }, 18 | ], 19 | ], 20 | } 21 | -------------------------------------------------------------------------------- /packages/vue-kawaii-docs/docs/readme.md: -------------------------------------------------------------------------------- 1 | # Getting started 2 | 3 |
4 | 5 |
6 | 7 | Vue Kawaii is a fork of [React Kawaii](https://github.com/miukimiu/react-kawaii). The library of cute SVG illustrations (Vue components). Ideal if you want to give some cuteness and personality to your Vue application. 8 | 9 | Install from NPM 10 | 11 | ```bash 12 | npm install --save-dev vue-kawaii 13 | ``` 14 | 15 | Install from Yarn 16 | 17 | ```bash 18 | yarn add vue-kawaii 19 | ``` 20 | 21 | Import it into your code: 22 | 23 | ```javascript static 24 | import { Planet } from 'vue-kawaii' 25 | 26 | export { 27 | name: 'Example' 28 | components: { 29 | Planet 30 | } 31 | } 32 | ``` 33 | -------------------------------------------------------------------------------- /packages/vue-kawaii-docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-kawaii-docs", 3 | "version": "0.1.2", 4 | "author": "Evan N ", 5 | "license": "MIT", 6 | "files": [ 7 | "docs/.vuepress/dist" 8 | ], 9 | "scripts": { 10 | "dev": "vuepress dev docs", 11 | "build": "vuepress build docs" 12 | }, 13 | "publishConfig": { 14 | "access": "public" 15 | }, 16 | "devDependencies": { 17 | "vuepress-plugin-component-docgen": "^0.0.2" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/vue-kawaii-docs/vue-kawaii-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/youngtailors/vue-kawaii/608d084afce82144148fc29004b7ad1fdcc6ff12/packages/vue-kawaii-docs/vue-kawaii-logo.png -------------------------------------------------------------------------------- /packages/vue-kawaii/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-kawaii", 3 | "version": "0.1.2", 4 | "author": "Evan N ", 5 | "license": "MIT", 6 | "files": [ 7 | "dist" 8 | ], 9 | "main": "dist/vue-kawaii.common.js", 10 | "module": "dist/vue-kawaii.es.js", 11 | "scripts": { 12 | "build": "rollup -c --environment BUILD:production" 13 | }, 14 | "peerDependencies": { 15 | "vue": "^2.5.21" 16 | }, 17 | "publishConfig": { 18 | "access": "public" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/vue-kawaii/rollup.config.js: -------------------------------------------------------------------------------- 1 | import path from 'path' 2 | 3 | import resolve from 'rollup-plugin-node-resolve' 4 | import cjs from 'rollup-plugin-commonjs' 5 | import vue from 'rollup-plugin-vue' 6 | import buble from 'rollup-plugin-buble' 7 | import babel from 'rollup-plugin-babel' 8 | import { uglify } from 'rollup-plugin-uglify' 9 | 10 | const reslv = p => path.resolve(__dirname, p) 11 | 12 | const plugins = [ 13 | vue({ 14 | compileTemplate: true, 15 | }), 16 | babel({ 17 | babelrc: false, 18 | presets: ['@babel/preset-env'], 19 | plugins: ['transform-vue-jsx'], 20 | comments: false, 21 | }), 22 | buble(), 23 | resolve(), 24 | cjs(), 25 | ] 26 | 27 | export default [ 28 | { 29 | input: reslv('src/main.js'), 30 | output: [ 31 | { 32 | format: 'es', 33 | file: reslv('dist/vue-kawaii.es.js'), 34 | }, 35 | { 36 | format: 'cjs', 37 | file: reslv('dist/vue-kawaii.common.js'), 38 | exports: 'named', 39 | }, 40 | ], 41 | plugins: [...plugins], 42 | }, 43 | { 44 | input: reslv('src/main.js'), 45 | output: { 46 | format: 'iife', 47 | file: reslv('dist/vue-kawaii.iife.js'), 48 | name: 'vuekawaii', 49 | exports: 'named', 50 | }, 51 | plugins: [ 52 | ...plugins, 53 | uglify({ 54 | compress: { unused: true, dead_code: true }, 55 | }), 56 | ], 57 | }, 58 | ] 59 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/components/backpack/Backpack.vue: -------------------------------------------------------------------------------- 1 | 2 | In this example the _Backpack_ has the mood excited. You can see the code and play with it. Try to change the mood to any other. 3 | 4 | ``` vue 5 | 6 | ``` 7 | 8 | 9 | 10 | 231 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/components/backpack/paths.js: -------------------------------------------------------------------------------- 1 | const paths = { 2 | pocketShapePath: 3 | 'M11.329 0h90.555c7.42 0 11.13 2.538 11.13 7.614v49.828c0 5.325-3.36 7.987-10.082 7.987H11.414c-8.474 0-12.23-2.6-11.267-7.802V7.263C.147 2.42 3.875 0 11.33 0z', 4 | pocketShapeShadowPath: 5 | 'M11.329 0h90.555c7.42 0 11.13 2.538 11.13 7.614v49.828c0 5.325-3.36 7.987-10.082 7.987H11.414c-8.474 0-12.23-2.6-11.267-7.802V7.263C.147 2.42 3.875 0 11.33 0z', 6 | hangingLoopShape: 7 | 'M0 33.872c3.088-9.656 5.841-16.215 8.258-19.678 1.945-2.786 4.895-4.488 6.72-6.462 3.444-3.722 5.393-6.574 6.665-6.574 1.12 0-3.688 3.488-5.891 10.96-1.04 3.529-2.014 10.78-2.919 21.754H0zm43.62.992H30.8c-.904-11.217-1.876-18.63-2.915-22.237-2.2-7.636-7.029-11.47-5.91-11.47 1.271 0 3.243 3.183 6.682 6.987 1.824 2.018 4.77 3.758 6.713 6.606 2.415 3.539 5.164 10.244 8.25 20.114z', 8 | mainCompartmentShape: 9 | 'M68.899 0c38.235 0 68.898 34.267 68.898 76.539v93.207c0 14.095-10.283 21.584-22.966 21.584H22.966C10.283 191.33 0 183.84 0 169.746V76.54C0 34.267 30.664 0 68.899 0z', 10 | mainCompartmentBottomStripe: 11 | 'M137.797 156.949v13.373c0 13.924-10.283 21.324-22.966 21.324H22.966c-12.683 0-22.966-7.4-22.966-21.324v-13.373h137.797z', 12 | mainCompartmentTop: 13 | 'M137.797 82.423v-5.948C137.797 34.423 107.134.333 68.9.333S-.001 34.423 0 76.475v5.948C0 40.371 30.664 6.281 68.899 6.281s68.898 34.09 68.898 76.142z', 14 | zip: 15 | 'M109.285 1.983h2.028l.547 8.922h-2.974l.4-8.922zm.592 6.94v.99h.991v-.99h-.99z', 16 | } 17 | 18 | export default paths 19 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/components/browser/Browser.vue: -------------------------------------------------------------------------------- 1 | 2 | In this example the _Browser_ has the mood lovestruck. You can see the code and play with it. Try to change the mood to any other. 3 | 4 | ```vue 5 | 6 | ``` 7 | 8 | 9 | 10 | 115 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/components/browser/paths.js: -------------------------------------------------------------------------------- 1 | const paths = { 2 | shape: 3 | 'M199.648 71.479V22.712C199.645 10.22 189.412-.003 176.902 0L22.74.006C10.233.006 0 10.228 0 22.72v92.044l.055-.01c.403 3.632 3.537 22.819 24.729 22.819 23.407 0 144.572 1.377 152.834 0 8.261-1.377 22.03-4.13 22.03-23.408V71.479z', 4 | shadow: 5 | 'M134.155 138.181c22.682.029 40.563-.108 43.562-.608 8.262-1.377 22.03-4.13 22.03-23.408V22.712C199.746 10.22 189.513-.003 177.002 0h-10.427c12.449.071 22.607 10.265 22.61 22.712v91.453c0 19.277-13.769 22.031-22.03 23.408-2.515.42-15.497.583-33 .608z', 6 | addressBar: 7 | 'M0 22.712C0 10.228 10.23.006 22.733.006L176.842 0c12.506-.003 22.736 10.22 22.738 22.712', 8 | } 9 | 10 | export default paths 11 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/components/cat/Cat.vue: -------------------------------------------------------------------------------- 1 | 2 | In this example the Cat has the mood excited. You can see the code and play with it. Try to change the mood to any other. 3 | 4 | ```vue 5 | 6 | ``` 7 | 8 | 9 | 10 | 167 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/components/cat/paths.js: -------------------------------------------------------------------------------- 1 | const paths = { 2 | body: 3 | 'M113.876 132.295c.91 2.705 21.818 65.749-6.184 65.397H77.846c-27.898.35-7.248-62.228-6.195-65.365-19.954-2.157-47.848-9.752-55.173-35.81-3.673-1.957-6.497-3.081-6.497-3.081l4.667-5.333S-3.096 89.64 1.109 85.436s13.333-15.744 13.333-15.744-11.23 2.103-9.128 0c1.044-1.044 6.153-3.788 12.67-8.442 3.162-9.69 8.325-17.38 14.502-23.48-4.482-10.424-.853-20.191 1.822-21.206 2.226-.83 14.75 3.197 21.214 5.384 4.043-6.006 6.53-12.307 6.53-12.307l5.333 4.667S65.846-3.436 70.05.769s15.744 13.334 15.744 13.334-2.103-11.231 0-9.129c2.051 2.052 10.667 19.795 27.436 33.077-9.487-7.436-22-14.41-37.949-21.23-10.77 4.615-19.897 9.076-27.641 13.64 8.462-5.743 14.41-20.82 14.41-20.82l5.334 4.667S65.846-3.436 70.05.769c4.2 4.2 15.712 13.308 15.744 13.334-.008-.041-2.099-11.227 0-9.129.862.863 2.885 4.5 6.187 9.412l.48-.018v-.009s.052 0 .153.004l.154-.004c.306.019.832.04 1.554.084 3.182-4.76 5.14-8.265 5.985-9.11 2.102-2.102 0 9.129 0 9.129s11.538-9.129 15.743-13.334 2.667 13.539 2.667 13.539L124.05 10s2.475 6.22 6.474 12.204c6.58-2.216 18.582-6.04 20.757-5.23 2.672 1.014 6.296 10.76 1.838 21.17 6.084 6.113 11.15 13.797 14.24 23.454 6.28 4.443 11.16 7.077 12.178 8.094 2.103 2.103-9.128 0-9.128 0s9.128 11.539 13.334 15.744c4.018 4.018-12.005 2.792-13.437 2.675l-.01.097 4.575 5.228s-2.6 1.034-6.054 2.846c-7.188 26.118-34.949 33.806-54.942 36.013z', 4 | shadow: 5 | 'M167.36 61.598c6.28 4.443 11.16 7.077 12.178 8.094 2.103 2.103-9.128 0-9.128 0s9.128 11.539 13.334 15.744c4.018 4.018-12.005 2.792-13.437 2.675l-.01.097 4.575 5.228s-2.6 1.034-6.054 2.846c-7.17 26.053-34.81 33.768-54.791 35.996-.72.08-1.433-.184-2.142-.791.847-.136 1.701-.282 2.562-.44 23.176-4.238 50.835-16.837 47.912-53.816-3.869-48.949-50.714-59.804-69.841-62.199-.02-.224-.038-.448-.056-.673 0 0 .667.011 1.878.085a1.95 1.95 0 0 1 .132-.224c3.094-4.646 5.004-8.055 5.836-8.887 2.102-2.102 0 9.129 0 9.129s11.538-9.129 15.743-13.334 2.667 13.539 2.667 13.539L124.05 10s2.508 6.302 6.554 12.323c1.037-.522 2.307-.958 2.492-1.02 10.446-3.511 16.508-4.954 18.185-4.329 2.672 1.014 6.296 10.76 1.838 21.17 6.084 6.113 11.15 13.797 14.24 23.454z', 6 | legs: 7 | 'M8.846 3.692C7.36 11.59 4.59 20.615 8.692 28.205c.667 1.23-1.897 1.487-2.513 1.59C4.744 29.949 3 29.333 2.231 28c-4.36-8.051.102-18.205 1.743-26.667C4.18.205 9.154 2 8.846 3.693zM14.128 14.359c-.256 4.872 1.026 9.692 2.667 14.205.872 2.36 6.564.872 5.743-1.436-1.487-4.154-2.717-8.513-2.615-12.923.103-3.23 1.026-6.308 2.256-9.282 1.129-2.82-4.153-2.718-5.025-.564h-.513c-1.282 3.23-2.359 6.513-2.513 10z', 8 | } 9 | 10 | export default paths 11 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/components/common/face/Face.vue: -------------------------------------------------------------------------------- 1 | 150 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/components/common/face/paths.js: -------------------------------------------------------------------------------- 1 | const paths = { 2 | defs: 3 | 'M1.45656876,3.14684877 C1.45656876,3.14684877 1.45656876,3.14684877 1.45656876,3.14684877 L0,3.14685315 C0,2.31818182 0.346033696,1.50734266 0.949429952,0.922027972 C1.55390756,0.335664336 2.38979521,0 3.2440659,0 L25.9525272,0 C26.8067979,0 27.6416041,0.335664336 28.2460818,0.922027972 C28.8505594,1.50734266 29.1965931,2.31818182 29.1965931,3.14685315 C29.1890236,5.85734266 28.240675,8.44825175 26.7127199,10.6814685 C25.1771954,12.9104895 23.0317865,14.8122378 20.4040931,16.0227273 C18.6544603,16.8251748 16.6809868,17.3087413 14.5982965,17.3076923 C11.4666916,17.3076923 8.61299495,16.2241259 6.33025392,14.5951049 C4.0399434,12.9587413 2.264358,10.779021 1.16245695,8.33811189 C0.431460764,6.70909091 0.0010813553,4.95314685 0,3.14685315 L1.45656896,3.14685315 Z', 4 | tongue: 5 | 'M9.59865983,9.95467851 C9.59865983,9.95467851 9.59865983,9.95467851 9.59865983,9.95467851 L9,9.95467851 C9,9.66740582 9.14222222,9.38631493 9.39022222,9.18340586 C9.63866667,8.98013316 10.3333333,8 15,8 C19.6666667,8 20.3608889,8.98013316 20.6093333,9.18340586 C20.8577778,9.38631493 21,9.66740582 21,9.95467851 C20.9968889,10.8943148 20.6071111,11.7924965 19.9791111,12.5666783 C19.348,13.3394055 18.4662222,13.9986781 17.3862222,14.4183144 C16.6671111,14.6964962 15.856,14.8641326 15,14.8637689 C13.7128889,14.8637689 12.54,14.4881326 11.6017778,13.9234054 C10.6604444,13.3561327 9.93066667,12.6004964 9.47777778,11.7543147 C9.17733333,11.1895875 9.00044444,10.5808603 9,9.95467851 L9.59865983,9.95467851 Z', 6 | happy: 7 | 'M6,1.9999998 C6.00066667,3.14799969 6.26599997,4.26466625 6.7166666,5.29933281 C7.39599986,6.85066599 8.49066642,8.23599919 9.90199962,9.27666575 C11.3099995,10.311999 13.0693326,10.9999989 14.9999991,10.9999989 C16.283999,11.0006656 17.5006655,10.6939989 18.5793321,10.1833323 C20.1993319,9.41466574 21.5219985,8.20599919 22.468665,6.788666 C23.4106649,5.36999947 23.9953316,3.72333297 23.9999982,1.9999998 C23.9999982,0.895333245 23.104665,0 21.9999984,0 C20.8953319,0 19.9999986,0.895333245 19.9999986,1.9999998 C20.0006653,2.51933308 19.8739986,3.11066636 19.6166653,3.7006663 C19.233332,4.58733288 18.5526654,5.4513328 17.7299988,6.0519994 C16.9033323,6.65733268 15.9686657,6.99999931 14.9999991,6.99999931 C14.3513325,6.99999931 13.7259992,6.84799932 13.1299993,6.56666602 C12.2373327,6.14866606 11.4226661,5.4193328 10.8599995,4.57066622 C10.2919996,3.7246663 9.99533294,2.77733306 9.99999961,1.9999998 C9.99999961,0.895333245 9.10466636,0 7.9999998,0 C6.89533325,0 6,0.895333245 6,1.9999998', 8 | sad: 9 | 'M6,1.9999998 C6.00066667,3.14799969 6.26599997,4.26466625 6.7166666,5.29933281 C7.39599986,6.85066599 8.49066642,8.23599919 9.90199962,9.27666575 C11.3099995,10.311999 13.0693326,10.9999989 14.9999991,10.9999989 C16.283999,11.0006656 17.5006655,10.6939989 18.5793321,10.1833323 C20.1993319,9.41466574 21.5219985,8.20599919 22.468665,6.788666 C23.4106649,5.36999947 23.9953316,3.72333297 23.9999982,1.9999998 C23.9999982,0.895333245 23.104665,7.10542736e-15 21.9999984,7.10542736e-15 C20.8953319,7.10542736e-15 19.9999986,0.895333245 19.9999986,1.9999998 C20.0006653,2.51933308 19.8739986,3.11066636 19.6166653,3.7006663 C19.233332,4.58733288 18.5526654,5.4513328 17.7299988,6.0519994 C16.9033323,6.65733268 15.9686657,6.99999931 14.9999991,6.99999931 C14.3513325,6.99999931 13.7259992,6.84799932 13.1299993,6.56666602 C12.2373327,6.14866606 11.4226661,5.4193328 10.8599995,4.57066622 C10.2919996,3.7246663 9.99533294,2.77733306 9.99999961,1.9999998 C9.99999961,0.895333245 9.10466636,7.10542736e-15 7.9999998,7.10542736e-15 C6.89533325,7.10542736e-15 6,0.895333245 6,1.9999998', 10 | bliss1: 11 | 'M11.3298651,9.72876106 C9.83321993,9.72876106 8.62018766,8.55758439 8.62018766,7.11258087 C8.62018766,6.27104292 7.91115541,5.58647579 7.03954249,5.58647579 C6.16883282,5.58647579 5.45889734,6.27104292 5.45889734,7.11258087 C5.45889734,8.55758439 4.2467683,9.72876106 2.74921991,9.72876106 C1.25257476,9.72876106 0.0395424927,8.55758439 0.0395424927,7.11258087 C0.0395424927,3.38626826 3.18005862,0.354115435 7.03954249,0.354115435 C10.8999296,0.354115435 14.0395425,3.38626826 14.0395425,7.11258087 C14.0395425,8.55758439 12.8274135,9.72876106 11.3298651,9.72876106', 12 | bliss2: 13 | 'M57.3298651,9.72876106 C55.8332199,9.72876106 54.6201877,8.55758439 54.6201877,7.11258087 C54.6201877,6.27104292 53.9111554,5.58647579 53.0395425,5.58647579 C52.1688328,5.58647579 51.4588973,6.27104292 51.4588973,7.11258087 C51.4588973,8.55758439 50.2467683,9.72876106 48.7492199,9.72876106 C47.2525748,9.72876106 46.0395425,8.55758439 46.0395425,7.11258087 C46.0395425,3.38626826 49.1800586,0.354115435 53.0395425,0.354115435 C56.8999296,0.354115435 60.0395425,3.38626826 60.0395425,7.11258087 C60.0395425,8.55758439 58.8274135,9.72876106 57.3298651,9.72876106', 14 | lovestruck1: 15 | 'M11.980165,2.98190092 C11.8050001,1.25390423 10.4403753,0.000206846623 8.73257491,0.000206846623 C7.5948106,0.000206846623 6.55305237,0.548970938 5.96686143,1.42848278 C5.38597852,0.537594374 4.38691529,0 3.26738291,0 C1.55981331,0 0.194957712,1.25369738 0.0200235653,2.98169407 C0.00617653522,3.05802048 -0.0505962882,3.45971662 0.12203002,4.11479988 C0.370814995,5.05967525 0.945466744,5.91912297 1.78344285,6.59964836 C1.78344285,6.59964836 4.36682268,10 5.96409202,10 C7.56136137,10 10.216515,6.59985521 10.216515,6.59985521 C11.0544911,5.91912297 11.6291428,5.0598821 11.8779278,4.11479988 C12.0505541,3.45992347 11.9937813,3.05822732 11.980165,2.98190092 Z', 16 | lovestruck2: 17 | 'M62.980165,2.98190092 C62.8050001,1.25390423 61.4403753,0.000206846623 59.7325749,0.000206846623 C58.5948106,0.000206846623 57.5530524,0.548970938 56.9668614,1.42848278 C56.3859785,0.537594374 55.3869153,0 54.2673829,0 C52.5598133,0 51.1949577,1.25369738 51.0200236,2.98169407 C51.0061765,3.05802048 50.9494037,3.45971662 51.12203,4.11479988 C51.370815,5.05967525 51.9454667,5.91912297 52.7834428,6.59964836 C52.7834428,6.59964836 55.3668227,10 56.964092,10 C58.5613614,10 61.216515,6.59985521 61.216515,6.59985521 C62.0544911,5.91912297 62.6291428,5.0598821 62.8779278,4.11479988 C63.0505541,3.45992347 62.9937813,3.05822732 62.980165,2.98190092 Z', 18 | shocked1: 19 | 'M5.29976191,8.12776191 L7.18533333,10.0133333 C7.576,10.404 8.088,10.5993333 8.6,10.5993333 C9.11133333,10.5993333 9.62333333,10.404 10.014,10.0133333 C10.7953333,9.23266667 10.7953333,7.966 10.014,7.18533333 L8.12814284,5.29966667 L10.014,3.414 C10.7953333,2.63333333 10.7953333,1.36666667 10.014,0.586 C9.23266667,-0.195333333 7.96666667,-0.195333333 7.18533333,0.586 L5.29976191,2.47157143 L3.414,0.586 C2.63266667,-0.195333333 1.36733333,-0.195333333 0.586,0.586 C-0.195333333,1.36666667 -0.195333333,2.63333333 0.586,3.414 L2.47166667,5.29966667 L0.586,7.18533333 C-0.195333333,7.966 -0.195333333,9.23266667 0.586,10.0133333 C0.976666667,10.404 1.488,10.5993333 2,10.5993333 C2.512,10.5993333 3.02333333,10.404 3.414,10.0133333 L5.29976191,8.12776191 Z', 20 | shocked2: 21 | 'M51.2997619,8.12776191 L53.1853333,10.0133333 C53.576,10.404 54.088,10.5993333 54.6,10.5993333 C55.1113333,10.5993333 55.6233333,10.404 56.014,10.0133333 C56.7953333,9.23266667 56.7953333,7.966 56.014,7.18533333 L54.1281428,5.29966667 L56.014,3.414 C56.7953333,2.63333333 56.7953333,1.36666667 56.014,0.586 C55.2326667,-0.195333333 53.9666667,-0.195333333 53.1853333,0.586 L51.2997619,2.47157143 L49.414,0.586 C48.6326667,-0.195333333 47.3673333,-0.195333333 46.586,0.586 C45.8046667,1.36666667 45.8046667,2.63333333 46.586,3.414 L48.4716667,5.29966667 L46.586,7.18533333 C45.8046667,7.966 45.8046667,9.23266667 46.586,10.0133333 C46.9766667,10.404 47.488,10.5993333 48,10.5993333 C48.512,10.5993333 49.0233333,10.404 49.414,10.0133333 L51.2997619,8.12776191 Z', 22 | ko1: 23 | 'M52.9142136,5.03553391 L50.4393398,2.56066017 C49.8535534,1.97487373 49.8535534,1.02512627 50.4393398,0.439339828 C51.0251263,-0.146446609 51.9748737,-0.146446609 52.5606602,0.439339828 L55.0355339,2.91421356 L57.5104076,0.439339828 C58.0961941,-0.146446609 59.0459415,-0.146446609 59.631728,0.439339828 C60.2175144,1.02512627 60.2175144,1.97487373 59.631728,2.56066017 L57.1568542,5.03553391 L59.631728,7.51040764 C60.2175144,8.09619408 60.2175144,9.04594155 59.631728,9.63172798 C59.0459415,10.2175144 58.0961941,10.2175144 57.5104076,9.63172798 L55.0355339,7.15685425 L52.5606602,9.63172798 C51.9748737,10.2175144 51.0251263,10.2175144 50.4393398,9.63172798 C49.8535534,9.04594155 49.8535534,8.09619408 50.4393398,7.51040764 L52.9142136,5.03553391 Z', 24 | ko2: 25 | 'M2.91421356,5.03553391 L0.439339828,2.56066017 C-0.146446609,1.97487373 -0.146446609,1.02512627 0.439339828,0.439339828 C1.02512627,-0.146446609 1.97487373,-0.146446609 2.56066017,0.439339828 L5.03553391,2.91421356 L7.51040764,0.439339828 C8.09619408,-0.146446609 9.04594155,-0.146446609 9.63172798,0.439339828 C10.2175144,1.02512627 10.2175144,1.97487373 9.63172798,2.56066017 L7.15685425,5.03553391 L9.63172798,7.51040764 C10.2175144,8.09619408 10.2175144,9.04594155 9.63172798,9.63172798 C9.04594155,10.2175144 8.09619408,10.2175144 7.51040764,9.63172798 L5.03553391,7.15685425 L2.56066017,9.63172798 C1.97487373,10.2175144 1.02512627,10.2175144 0.439339828,9.63172798 C-0.146446609,9.04594155 -0.146446609,8.09619408 0.439339828,7.51040764 L2.91421356,5.03553391 Z', 26 | } 27 | 28 | export default paths 29 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/components/common/wrapper/Wrapper.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'Wrapper', 3 | render(h) { 4 | const { style } = this 5 | return h( 6 | 'div', 7 | { 8 | style: { position: 'relative', ...(style || {}) }, 9 | }, 10 | this.$slots.default, 11 | ) 12 | }, 13 | } 14 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/components/creditCard/CreditCard.vue: -------------------------------------------------------------------------------- 1 | 2 | In this example the _CreditCard_ has the mood sad. You can see the code and play with it. Try to change the mood to any other. 3 | 4 | ```vue 5 | 6 | ``` 7 | 8 | 9 | 10 | 98 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/components/creditCard/paths.js: -------------------------------------------------------------------------------- 1 | const paths = { 2 | shape: 3 | 'M187.018 143H10.982C4.916 143 0 138.097 0 132.047V10.953C0 4.903 4.916 0 10.982 0h176.036C193.084 0 198 4.903 198 10.953v121.094c0 6.05-4.916 10.953-10.982 10.953', 4 | shadow: 5 | 'M176.018 143c6.066 0 10.982-4.903 10.982-10.953V10.953C187 4.903 182.084 0 176.018 0h11C193.084 0 198 4.903 198 10.953v121.094c0 6.05-4.916 10.953-10.982 10.953h-11z', 6 | } 7 | 8 | export default paths 9 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/components/ghost/Ghost.vue: -------------------------------------------------------------------------------- 1 | 2 | In this example the _Ghost_ has the mood happy. You can see the code and play with it. Try to change the mood to any other. 3 | 4 | ```vue 5 | 6 | ``` 7 | 8 | 9 | 10 | 89 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/components/ghost/paths.js: -------------------------------------------------------------------------------- 1 | const paths = { 2 | shape: 3 | 'M63.004.034C27.572 1.238 0 36.002 0 76.472v76.272c0 8.116 5.832 14.718 13 14.718s13-6.602 13-14.718c0-2.705 1.944-4.906 4.333-4.906 2.39 0 4.334 2.2 4.334 4.906 0 8.116 5.831 14.718 13 14.718 3.472 0 6.737-1.53 9.192-4.31 2.456-2.78 3.808-6.477 3.807-10.408 0-2.712 1.939-4.906 4.334-4.906 2.39 0 4.333 2.2 4.333 4.906 0 8.116 5.832 14.718 13 14.718 7.169 0 13-6.602 13-14.718 0-2.705 1.944-4.906 4.334-4.906 2.39 0 4.333 2.2 4.333 4.906 0 8.116 5.832 14.718 13 14.718s13-6.602 13-14.718V73.592c0-41.028-29.82-74.82-66.996-73.558z', 4 | shadow: 5 | 'M111.5 166.08c4.427-2.35 7.5-7.444 7.5-13.336V73.592C119 35.918 93.857 4.346 60.962.412a6.603 6.603 0 0 1 2.042-.378C100.181-1.228 130 32.564 130 73.592v79.152c0 8.116-5.832 14.718-13 14.718-1.965 0-3.829-.496-5.5-1.383z', 6 | } 7 | 8 | export default paths 9 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/components/iceCream/IceCream.vue: -------------------------------------------------------------------------------- 1 | 2 | In this example the _IceCream_ has the mood blissful. You can see the code and play with it. Try to change the mood to any other. 3 | 4 | ```vue 5 | 6 | ``` 7 | 8 | 9 | 10 | 95 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/components/iceCream/paths.js: -------------------------------------------------------------------------------- 1 | const paths = { 2 | stick: 3 | 'M56.142 219.63h-3.964c-4.36 0-7.927-3.53-7.927-7.843v-31.372h19.818v31.372c0 4.314-3.568 7.843-7.927 7.843z', 4 | shape: 5 | 'M57.184 0h-4.34C24.19 0 .75 23.192.75 51.54v113.456c0 8.502 6.964 15.392 15.558 15.392H93.72c8.593 0 15.557-6.89 15.557-15.392V51.54C109.277 23.192 85.837 0 57.184 0z', 6 | shadow: 7 | 'M83.97 180.388c8.593 0 15.557-6.89 15.557-15.392V51.54c0-27.41-21.913-49.998-49.264-51.464.938-.05 1.881-.076 2.83-.076h4.34c28.653 0 52.094 23.192 52.094 51.54v113.456c0 8.502-6.964 15.392-15.557 15.392h-10z', 8 | } 9 | 10 | export default paths 11 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/components/mug/Mug.vue: -------------------------------------------------------------------------------- 1 | 2 | In this example the _Mug_ has the mood happy. You can see the code and play with it. Try to change the mood to any other. 3 | 4 | ```vue 5 | 6 | ``` 7 | 8 | 9 | 10 | 89 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/components/mug/paths.js: -------------------------------------------------------------------------------- 1 | const paths = { 2 | shape: 3 | 'M17.591 22.258h21.5V5.565C39.091 2.49 41.718 0 44.955 0h121.181C169.374 0 172 2.49 172 5.565v70.483C172 97.526 153.588 115 130.955 115H80.136c-20.764 0-37.93-14.72-40.633-33.733C17.283 78.701 0 60.722 0 38.952c0-9.205 7.891-16.694 17.591-16.694zm20.627 47.704V33.387h-21.5c-3.233 0-5.863 2.496-5.863 5.565 0 15.485 11.835 28.37 27.363 31.01z', 4 | shadow: 5 | 'M156.99 0h9.106C169.356 0 172 2.49 172 5.565v70.483C172 97.526 153.462 115 130.673 115h-16.89 7.784c22.79 0 41.327-17.474 41.327-38.952V5.565c0-3.074-2.644-5.565-5.903-5.565H106z', 6 | } 7 | 8 | export default paths 9 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/components/planet/Planet.vue: -------------------------------------------------------------------------------- 1 | 2 | In this example the _Planet_ has the mood happy. You can see the code and play with it. Try to change the mood to any other. 3 | 4 | ```vue 5 | 6 | ``` 7 | 8 | 9 | 10 | 104 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/components/planet/paths.js: -------------------------------------------------------------------------------- 1 | const paths = { 2 | shape: 3 | 'M67 134c37.003 0 67-29.997 67-67S104.003 0 67 0 0 29.997 0 67s29.997 67 67 67z', 4 | shadow: 5 | 'M61.5 133.777C95.93 130.98 123 102.151 123 67 123 31.849 95.93 3.02 61.5.223A67.906 67.906 0 0 1 67 0c37.003 0 67 29.997 67 67s-29.997 67-67 67c-1.852 0-3.686-.075-5.5-.223z', 6 | } 7 | 8 | export default paths 9 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/components/speechBubble/SpeechBubble.vue: -------------------------------------------------------------------------------- 1 | 2 | In this example the _SpeechBubble_ has the mood happy. You can see the code and play with it. Try to change the mood to any other. 3 | 4 | ```vue 5 | 6 | ``` 7 | 8 | 9 | 10 | 104 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/components/speechBubble/paths.js: -------------------------------------------------------------------------------- 1 | const paths = { 2 | shape: 3 | 'M31.235 123.65L.717 131.824l8.355-31.172A66.718 66.718 0 0 1 0 67C0 30 29.997 0 67.002 0 104.001 0 134 29.999 134 67c0 37-30 67-66.998 67a66.62 66.62 0 0 1-35.767-10.35z', 4 | shadow: 5 | 'M62.502.149a68.004 68.004 0 0 1 4.5-.149C104.001 0 134 29.999 134 67c0 37-30 67-66.998 67-1.514 0-3.016-.05-4.505-.148C97.401 131.539 125 102.489 125 66.999 125 31.511 97.403 2.464 62.502.15z', 6 | } 7 | 8 | export default paths 9 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/main.js: -------------------------------------------------------------------------------- 1 | import Backpack from './components/backpack/Backpack.vue' 2 | import Browser from './components/browser/Browser.vue' 3 | import CreditCard from './components/creditCard/CreditCard.vue' 4 | import Ghost from './components/ghost/Ghost.vue' 5 | import IceCream from './components/iceCream/IceCream.vue' 6 | import Mug from './components/mug/Mug.vue' 7 | import Planet from './components/planet/Planet.vue' 8 | import SpeechBubble from './components/speechBubble/SpeechBubble.vue' 9 | import Cat from './components/cat/Cat.vue' 10 | 11 | export { 12 | Backpack, 13 | Browser, 14 | CreditCard, 15 | Ghost, 16 | IceCream, 17 | Mug, 18 | Planet, 19 | SpeechBubble, 20 | Cat, 21 | } 22 | -------------------------------------------------------------------------------- /packages/vue-kawaii/src/utils/getUniqueId.js: -------------------------------------------------------------------------------- 1 | /* 2 | To prevent the SVGs masks being used with the same id 3 | */ 4 | const getUniqueId = () => { 5 | const id = Math.random() 6 | .toString(36) 7 | .substring(2, 15) 8 | 9 | return id 10 | } 11 | 12 | export default getUniqueId 13 | --------------------------------------------------------------------------------