├── .gitattributes
├── .gitignore
├── .editorconfig
├── example
    ├── example.md
    ├── index.js
    └── App.vue
├── circle.yml
├── scripts
    └── build.js
├── LICENSE
├── README.md
└── package.json


/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist/
3 | src/
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false


--------------------------------------------------------------------------------
/example/example.md:
--------------------------------------------------------------------------------
 1 | ```vue
 2 | <template>
 3 |   <kebab-icon class="custom-class"></kebab-icon>
 4 | </template>
 5 | 
 6 | <script>
 7 | import { ICON } from 'vue-bytesize-icons'
 8 | 
 9 | export default {
10 |   components: {
11 |     ICON
12 |   }
13 | }
14 | </script>
15 | ```
16 | 


--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Tippy from 'v-tippy'
 3 | import 'typeface-nunito/index.css'
 4 | import App from './App.vue'
 5 | 
 6 | Vue.use(Tippy, {
 7 |   position: 'right',
 8 |   theme: 'light',
 9 |   size: 'small',
10 |   animation: 'perspective',
11 |   performance: true,
12 |   arrow: true,
13 |   trigger: 'click'
14 | })
15 | 
16 | new Vue({
17 |   el: '#app',
18 |   render: h => h(App)
19 | })
20 | 


--------------------------------------------------------------------------------
/circle.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | jobs:
 3 |   build:
 4 |     working_directory: ~/project
 5 |     docker:
 6 |       - image: circleci/node:8.0.0
 7 |     branches:
 8 |       ignore:
 9 |         - gh-pages # list of branches to ignore
10 |         - /release\/.*/ # or ignore regexes
11 |     steps:
12 |       - checkout
13 |       - restore_cache:
14 |           key: dependency-cache-{{ checksum "yarn.lock" }}
15 |       - run:
16 |           name: install dependences
17 |           command: yarn
18 |       - save_cache:
19 |           key: dependency-cache-{{ checksum "yarn.lock" }}
20 |           paths:
21 |             - ./node_modules
22 |       - run:
23 |           name: test
24 |           command: yarn test
25 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs')
 2 | const path = require('path')
 3 | const pascalCase = require('pascal-case')
 4 | const mkdir = require('mkdirp')
 5 | 
 6 | const iconsPath = './node_modules/bytesize-icons/dist/icons'
 7 | const icons = fs.readdirSync(iconsPath)
 8 | 
 9 | const componentTemplate = ({
10 |   name,
11 |   content
12 | }) => `
13 | export const ${getComponentName(name)} = {
14 |   name: '${getComponentName(name)}',
15 |   functional: true,
16 |   render(h, ctx) {
17 |     return ${content.replace(/<svg([^>]+)>/, '<svg$1 {...ctx.data}>')}
18 |   }
19 | }
20 | `
21 | 
22 | const component = icons.map(name => componentTemplate({
23 |   name,
24 |   content: fs.readFileSync(path.join(iconsPath, name), 'utf8')
25 | })).join('\n')
26 | 
27 | console.log(component)
28 | mkdir.sync('./src')
29 | fs.writeFileSync('./src/index.js', component, 'utf8')
30 | 
31 | function getComponentName(v) {
32 |   return pascalCase(v.replace(/\.[a-z]+$/, 'Icon'))
33 | }
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) egoist <0x142857@gmail.com> (https://egoistian.com)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-bytesize-icons
 2 | 
 3 | [![NPM version](https://img.shields.io/npm/v/vue-bytesize-icons.svg?style=flat)](https://npmjs.com/package/vue-bytesize-icons) [![NPM downloads](https://img.shields.io/npm/dm/vue-bytesize-icons.svg?style=flat)](https://npmjs.com/package/vue-bytesize-icons) [![CircleCI](https://circleci.com/gh/egoist/vue-bytesize-icons/tree/master.svg?style=shield)](https://circleci.com/gh/egoist/vue-bytesize-icons/tree/master)  [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&style=flat)](https://github.com/egoist/donate)
 4 | 
 5 | ## Install
 6 | 
 7 | ```bash
 8 | yarn add vue-bytesize-icons
 9 | ```
10 | 
11 | ## Usage
12 | 
13 | View the documentation and demo here: https://vue-bytesize-icons.egoist.sh
14 | 
15 | ## Contributing
16 | 
17 | 1. Fork it!
18 | 2. Create your feature branch: `git checkout -b my-new-feature`
19 | 3. Commit your changes: `git commit -am 'Add some feature'`
20 | 4. Push to the branch: `git push origin my-new-feature`
21 | 5. Submit a pull request :D
22 | 
23 | 
24 | ## Author
25 | 
26 | **vue-bytesize-icons** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.<br>
27 | Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/vue-bytesize-icons/contributors)).
28 | 
29 | > [egoistian.com](https://egoistian.com) · GitHub [@egoist](https://github.com/egoist) · Twitter [@rem_rin_rin](https://twitter.com/rem_rin_rin)
30 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-bytesize-icons",
 3 |   "version": "0.1.1",
 4 |   "description": "Bytesize icons as Vue components",
 5 |   "repository": {
 6 |     "url": "egoist/vue-bytesize-icons",
 7 |     "type": "git"
 8 |   },
 9 |   "main": "dist/vue-bytesize-icons.js",
10 |   "module": "dist/vue-bytesize-icons.es.js",
11 |   "jsnext:main": "dist/vue-bytesize-icons.es.js",
12 |   "files": [
13 |     "dist"
14 |   ],
15 |   "scripts": {
16 |     "test": "echo 'no tests!' && npm run lint",
17 |     "lint": "xo",
18 |     "prepublish": "npm run build",
19 |     "build": "node scripts/build && bili --format umd,es,umdCompress --module-name BytesizeIcons --exports named --js babel",
20 |     "build:example": "poi build",
21 |     "example": "poi"
22 |   },
23 |   "author": "egoist <0x142857@gmail.com>",
24 |   "license": "MIT",
25 |   "dependencies": {
26 |     "babel-helper-vue-jsx-merge-props": "^2.0.2"
27 |   },
28 |   "devDependencies": {
29 |     "babel-plugin-preval": "^1.4.2",
30 |     "babel-preset-vue-app": "^1.2.0",
31 |     "bili": "^0.17.0",
32 |     "bytesize-icons": "^1.2.0",
33 |     "eslint-config-rem": "^3.0.0",
34 |     "gh-pages": "^1.0.0",
35 |     "lodash.kebabcase": "^4.1.1",
36 |     "marked3": "^0.4.0",
37 |     "mkdirp": "^0.5.1",
38 |     "pascal-case": "^2.0.1",
39 |     "poi": "^9.1.3",
40 |     "prismjs": "^1.6.0",
41 |     "rollup-plugin-babel": "^2.7.1",
42 |     "typeface-nunito": "^0.0.31",
43 |     "v-tippy": "^1.0.0",
44 |     "vue-github-badge": "^1.0.1",
45 |     "xo": "^0.18.0"
46 |   },
47 |   "xo": {
48 |     "extends": "rem",
49 |     "ignores": [
50 |       "src/**",
51 |       "example/**"
52 |     ]
53 |   },
54 |   "babel": {
55 |     "presets": [
56 |       [
57 |         "vue-app",
58 |         {
59 |           "useBuiltIns": true
60 |         }
61 |       ]
62 |     ],
63 |     "plugins": [
64 |       "preval"
65 |     ]
66 |   },
67 |   "poi": {
68 |     "entry": "example/index.js",
69 |     "dist": "example/dist"
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/example/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <github
  4 |       v-tippy="{title: 'Star me on GitHub'}"
  5 |       fill="white"
  6 |       slug="egoist/vue-bytesize-icons">
  7 |     </github>
  8 |     <header class="header">
  9 |       <div class="container">
 10 |         <h1 class="hero-heading">vue-bytesize-icons</h1>
 11 |         <h2 class="desc">Where the tiny style-controlled SVG iconset meets Vue functional component</h2>
 12 |       </div>
 13 |     </header>
 14 |     <div class="container">
 15 |       <div class="search-bar">
 16 |         <input
 17 |           type="text"
 18 |           class="search-input"
 19 |           v-model="keyword"
 20 |           :placeholder="`Search in ${icons.length} icons...`">
 21 |       </div>
 22 |       <div class="icons">
 23 |         <div
 24 |           class="icon"
 25 |           v-tippy="{interactive: true}"
 26 |           :title="example"
 27 |           v-for="icon in filteredIcons"
 28 |           @click="handleClickIcon(icon)"
 29 |           :key="icon">
 30 |           <component :is="icon" class="icon-svg"></component>
 31 |           <span>{{ icon }}</span>
 32 |         </div>
 33 |       </div>
 34 |     </div>
 35 |     <footer class="footer">
 36 |       <div class="container">
 37 |         &copy; {{ year }} Brought by <a href="https://github.com/egoist">EGOIST</a>
 38 |       </div>
 39 |     </footer>
 40 |   </div>
 41 | </template>
 42 | 
 43 | <script>
 44 | import kebab from 'lodash.kebabcase'
 45 | import Github from 'vue-github-badge'
 46 | import * as icons from '../src'
 47 | 
 48 | const example = preval`
 49 | const fs = require('fs')
 50 | require('prismjs')
 51 | require('prismjs/components/prism-javascript')
 52 | const marked = require('marked3')
 53 | const markdown = fs.readFileSync(__dirname + '/example.md', 'utf8')
 54 | const html = marked(markdown, {
 55 |   highlight(str, lang) {
 56 |     return Prism.highlight(str, Prism.languages[lang] || Prism.languages.markup)
 57 |   }
 58 | })
 59 | module.exports = html
 60 | `
 61 | 
 62 | export default {
 63 |   data() {
 64 |     return {
 65 |       icons: Object.keys(icons),
 66 |       keyword: '',
 67 |       hoverIcon: '',
 68 |       year: new Date().getFullYear()
 69 |     }
 70 |   },
 71 |   computed: {
 72 |     filteredIcons() {
 73 |       const keyword = this.keyword.trim().toLowerCase()
 74 |       if (!keyword) return this.icons
 75 | 
 76 |       return this.icons.filter(name => {
 77 |         return name.toLowerCase().indexOf(keyword) > -1
 78 |       })
 79 |     },
 80 |     example() {
 81 |       return example
 82 |         .replace(/ICON/g, this.hoverIcon)
 83 |         .replace(/kebab-icon/g, kebab(this.hoverIcon))
 84 |     }
 85 |   },
 86 |   methods: {
 87 |     handleClickIcon(icon) {
 88 |       this.hoverIcon = icon
 89 |     }
 90 |   },
 91 |   components: {
 92 |     ...icons,
 93 |     Github
 94 |   }
 95 | }
 96 | </script>
 97 | 
 98 | <style src="v-tippy/dist/tippy.css"></style>
 99 | <style src="prismjs/themes/prism.css"></style>
100 | 
101 | <style>
102 | body {
103 |   margin: 0;
104 |   font: 14px/1.4 'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;
105 | }
106 | 
107 | * {
108 |   box-sizing: border-box;
109 | }
110 | 
111 | a {
112 |   color: #333;
113 |   text-decoration: none;
114 | }
115 | 
116 | a:hover {
117 |   text-decoration: underline;
118 | }
119 | 
120 | .container {
121 |   max-width: 900px;
122 |   margin: 0 auto;
123 |   padding: 0 10px;
124 | }
125 | 
126 | .tippy-tooltip {
127 |   text-align: left;
128 | }
129 | 
130 | .tippy-tooltip-content pre {
131 |   margin: 0;
132 |   padding: 16px;
133 |   overflow: auto;
134 |   font-size: 85%;
135 |   line-height: 1.45;
136 |   border-radius: 3px;
137 | }
138 | 
139 | .tippy-tooltip-content pre code {
140 |   overflow: visible;
141 |   word-wrap: normal;
142 |   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
143 | }
144 | 
145 | .tippy-popper .tippy-tooltip.light-theme[data-animatefill] {
146 |   background-color: white;
147 | }
148 | </style>
149 | 
150 | <style scoped>
151 | .header {
152 |   background: linear-gradient(90deg,#5733ea, #4894ff 70%,#a5bcff);
153 |   padding: 40px 0;
154 | }
155 | 
156 | .desc {
157 |   color: white;
158 |   font-weight: 500;
159 | }
160 | 
161 | .hero-heading {
162 |   color: #7dffc3;
163 |   margin: 0;
164 |   font-size: 2rem;
165 |   font-weight: 600;
166 |   background: -webkit-linear-gradient(135deg, #fff9b0, #7dffc3);
167 |   -webkit-background-clip: text;
168 |   -webkit-text-fill-color: transparent;
169 | }
170 | 
171 | .icons {
172 |   display: flex;
173 |   flex-wrap: wrap;
174 | }
175 | 
176 | .icon {
177 |   display: flex;
178 |   align-items: center;
179 |   padding: 10px;
180 |   width: 25%;
181 |   border-radius: 3px;
182 |   cursor: pointer;
183 | }
184 | 
185 | .icon:hover {
186 |   background: #f1f5ff;
187 | }
188 | 
189 | .icon-svg {
190 |   margin-right: 10px
191 | }
192 | 
193 | .search-bar {
194 |   display: flex;
195 |   justify-content: center;
196 |   align-items: center;
197 |   height: 100px;
198 | }
199 | 
200 | .search-input {
201 |   padding: 10px;
202 |   outline: none;
203 |   width: 100%;
204 |   font-size: 1rem;
205 |   border: 1px solid #e2e2e2;
206 |   border-radius: 3px;
207 | }
208 | 
209 | .search-input:focus {
210 |   border-color: #ccc;
211 | }
212 | 
213 | .footer {
214 |   margin: 40px 0;
215 |   font-size: 1rem
216 | }
217 | 
218 | @media screen and (max-width: 768px) {
219 |   .icon {
220 |     width: 100%;
221 |   }
222 | }
223 | </style>
224 | 


--------------------------------------------------------------------------------