├── .babelrc ├── .editorconfig ├── .eslintrc.js ├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── new-icon-add-request.md ├── .gitignore ├── README.md ├── assets ├── Logo.png ├── LogoNew.png ├── Notion-Favicon-Original.png ├── Notion-Favicon-Transparent.png ├── README.md ├── background8.png ├── buefy.png ├── css │ └── tailwind.css ├── notions-related-icons.png └── scss │ └── main.scss ├── components ├── BottomFooter.vue ├── Card.vue ├── Logo.vue ├── README.md └── TopHeader.vue ├── config └── icons-config.json ├── deploy.sh ├── gallery ├── AppUtils.ts ├── Constants.ts ├── UtilFunctions.ts └── config.ts ├── icon-names.txt ├── jest.config.js ├── jsconfig.json ├── layouts ├── README.md └── default.vue ├── middleware └── README.md ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages ├── README.md ├── about.vue ├── icons.vue ├── index.vue └── inspire.vue ├── plugins ├── README.md └── global-components.ts ├── static ├── .nojekyll ├── CNAME ├── Notion-Favicon-Original.png ├── Notion-Favicon-Transparent.png ├── README.md ├── favicon.ico ├── social-facebook.jpg ├── social-linkedin1.jpg └── social-twitter1.jpg ├── store └── README.md ├── tailwind.config.js ├── tailwind.conig.js ├── test └── Logo.spec.js ├── tsconfig.json └── vue-swatches.d.ts /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "test": { 4 | "presets": [ 5 | [ 6 | "@babel/preset-env", 7 | { 8 | "targets": { 9 | "node": "current" 10 | } 11 | } 12 | ] 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true 6 | }, 7 | extends: [ 8 | '@nuxtjs/eslint-config-typescript', 9 | 'plugin:nuxt/recommended' 10 | ], 11 | plugins: [ 12 | ], 13 | // add your custom rules here 14 | rules: {} 15 | } 16 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: erajasekar 7 | 8 | --- 9 | 10 | PLEASE CLICK ON PREVIEW TO READ INSTRUCTIONS AND SWITCHBACK WRITE TAB TO PROVIDE DETAILS. 11 | 12 | --- 13 | 14 | **Describe the bug** 15 | A clear and concise description of what the bug is. 16 | 17 | **To Reproduce** 18 | Steps to reproduce the behavior: 19 | 1. Go to '...' 20 | 2. Click on '....' 21 | 3. Scroll down to '....' 22 | 4. See error 23 | 24 | **Expected behavior** 25 | A clear and concise description of what you expected to happen. 26 | 27 | **Screenshots** 28 | If applicable, add screenshots to help explain your problem. 29 | 30 | **Additional context** 31 | Add any other context about the problem here. 32 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/new-icon-add-request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: New Icon Add Request 3 | about: List all Icons you want to be added 4 | title: New Icon Add Request 5 | labels: '' 6 | assignees: erajasekar 7 | 8 | --- 9 | 10 | PLEASE CLICK ON PREVIEW TO READ INSTRUCTIONS AND SWITCHBACK WRITE TAB TO PROVIDE DETAILS. 11 | 12 | --- 13 | 14 | ### Find Icons you want to add from Icons8 15 | 16 | * Go to [Icons8 Material style icons](https://icons8.com/icons/material) 17 | * Search for your icon with keyword. For e.g `facebook`. 18 | * Click on the icon you want and click `Embed HTML Button`. 19 | * Copy name of the icon from last part of img src URL. In URL `https://img.icons8.com/material/24/000000/facebook-new.png`. Icon name is `facebook-new` 20 | * Repeat this for each Icon you want to add and have a list of Icon names. 21 | * For each Icon, if you want it to an associate search keyword, provide a comma-separated tags list. 22 | 23 | ### List Icon names and tags below. 24 | 25 | *REPLACE THIS EXAMPLE WITH YOURS FOR EACH ICON* 26 | 27 | name : "facebook-new" 28 | tags : "social" 29 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # notion-icons 2 | 3 | [View Live](https://notion.erajasekar.com/) 4 | 5 | ## Build Setup 6 | 7 | ```bash 8 | # install dependencies 9 | $ npm install 10 | 11 | # serve with hot reload at localhost:3333 12 | $ npm run dev 13 | 14 | # build for production and launch server 15 | $ npm run build 16 | $ npm run export 17 | $ npm run serve 18 | 19 | ``` 20 | 21 | For detailed explanation on how the project work, check out [Nuxt.js docs](https://nuxtjs.org). 22 | -------------------------------------------------------------------------------- /assets/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erajasekar/notion-icons/31da2ad1331722b47898561081936f7aae0be049/assets/Logo.png -------------------------------------------------------------------------------- /assets/LogoNew.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erajasekar/notion-icons/31da2ad1331722b47898561081936f7aae0be049/assets/LogoNew.png -------------------------------------------------------------------------------- /assets/Notion-Favicon-Original.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erajasekar/notion-icons/31da2ad1331722b47898561081936f7aae0be049/assets/Notion-Favicon-Original.png -------------------------------------------------------------------------------- /assets/Notion-Favicon-Transparent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erajasekar/notion-icons/31da2ad1331722b47898561081936f7aae0be049/assets/Notion-Favicon-Transparent.png -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /assets/background8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erajasekar/notion-icons/31da2ad1331722b47898561081936f7aae0be049/assets/background8.png -------------------------------------------------------------------------------- /assets/buefy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erajasekar/notion-icons/31da2ad1331722b47898561081936f7aae0be049/assets/buefy.png -------------------------------------------------------------------------------- /assets/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss/base'; 2 | @import 'tailwindcss/components'; 3 | @import 'tailwindcss/utilities'; 4 | -------------------------------------------------------------------------------- /assets/notions-related-icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erajasekar/notion-icons/31da2ad1331722b47898561081936f7aae0be049/assets/notions-related-icons.png -------------------------------------------------------------------------------- /assets/scss/main.scss: -------------------------------------------------------------------------------- 1 | // Import Bulma's core 2 | @import "~bulma/sass/utilities/_all"; 3 | 4 | // Import Bulma and Buefy styles 5 | @import "~bulma"; 6 | @import "~buefy/src/scss/buefy"; -------------------------------------------------------------------------------- /components/BottomFooter.vue: -------------------------------------------------------------------------------- 1 | 28 | 37 | -------------------------------------------------------------------------------- /components/Card.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 43 | -------------------------------------------------------------------------------- /components/Logo.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 30 | -------------------------------------------------------------------------------- /components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /components/TopHeader.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 48 | 73 | -------------------------------------------------------------------------------- /config/icons-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "config": [ 3 | { 4 | "icon8" : { 5 | "url" : "https://img.icons8.com", 6 | "size" : "280", 7 | "style": "material", 8 | "icons": [ 9 | { 10 | "name" : "chef-knife", 11 | "tags" : ["chef"] 12 | } 13 | 14 | { 15 | "name" : "circled-a", 16 | "tags" : ["a", "letter"] 17 | }, 18 | { 19 | "name" : "circled-b", 20 | "tags" : ["b", "letter"] 21 | }, 22 | { 23 | "name" : "circled-c", 24 | "tags" : ["c", "letter"] 25 | }, 26 | { 27 | "name" : "circled-d", 28 | "tags" : ["d", "letter"] 29 | }, 30 | { 31 | "name" : "circled-e", 32 | "tags" : ["e", "letter"] 33 | }, 34 | { 35 | "name" : "circled-f", 36 | "tags" : ["f", "letter"] 37 | }, 38 | { 39 | "name" : "circled-g", 40 | "tags" : ["g", "letter"] 41 | }, 42 | { 43 | "name" : "circled-h", 44 | "tags" : ["h", "letter"] 45 | }, 46 | { 47 | "name" : "circled-i", 48 | "tags" : ["i", "letter"] 49 | }, 50 | { 51 | "name" : "circled-j", 52 | "tags" : ["j", "letter"] 53 | }, 54 | { 55 | "name" : "circled-k", 56 | "tags" : ["k", "letter"] 57 | }, 58 | { 59 | "name" : "circled-l", 60 | "tags" : ["l", "letter"] 61 | }, 62 | { 63 | "name" : "circled-m", 64 | "tags" : ["m", "letter"] 65 | }, 66 | { 67 | "name" : "circled-n", 68 | "tags" : ["n", "letter"] 69 | }, 70 | { 71 | "name" : "circled-o", 72 | "tags" : ["o", "letter"] 73 | }, 74 | { 75 | "name" : "circled-p", 76 | "tags" : ["p", "letter"] 77 | }, 78 | { 79 | "name" : "circled-q", 80 | "tags" : ["q", "letter"] 81 | }, 82 | { 83 | "name" : "circled-r", 84 | "tags" : ["r", "letter"] 85 | }, 86 | { 87 | "name" : "circled-s", 88 | "tags" : ["s", "letter"] 89 | }, 90 | { 91 | "name" : "circled-t", 92 | "tags" : ["t", "letter"] 93 | }, 94 | { 95 | "name" : "circled-u", 96 | "tags" : ["u", "letter"] 97 | }, 98 | { 99 | "name" : "circled-v", 100 | "tags" : ["v", "letter"] 101 | }, 102 | { 103 | "name" : "circled-w", 104 | "tags" : ["w", "letter"] 105 | }, 106 | { 107 | "name" : "circled-x", 108 | "tags" : ["x", "letter"] 109 | }, 110 | { 111 | "name" : "circled-y", 112 | "tags" : ["y", "letter"] 113 | }, 114 | { 115 | "name" : "circled-z", 116 | "tags" : ["z", "letter"] 117 | }, 118 | { 119 | "name" : "add-to-favorites", 120 | "tags" : [] 121 | }, 122 | { 123 | "name" : "attach", 124 | "tags" : [] 125 | }, 126 | { 127 | "name" : "baby", 128 | "tags" : ["kids"] 129 | }, 130 | { 131 | "name" : "ball-point-pen", 132 | "tags" : ["writing"] 133 | }, 134 | { 135 | "name" : "bonds", 136 | "tags" : ["money", "finance"] 137 | }, 138 | { 139 | "name" : "us-dollar-circled--v1", 140 | "tags" : ["money", "finance"] 141 | }, 142 | { 143 | "name" : "book-shelf", 144 | "tags" : ["booklist"] 145 | }, 146 | { 147 | "name" : "bookmark", 148 | "tags" : [] 149 | }, 150 | { 151 | "name" : "boy", 152 | "tags" : ["kids"] 153 | }, 154 | { 155 | "name" : "brain", 156 | "tags" : ["think", "knowledge", "intelligence"] 157 | }, 158 | { 159 | "name" : "brainstorm", 160 | "tags" : ["think"] 161 | }, 162 | { 163 | "name" : "brainstorm-skill", 164 | "tags" : ["think"] 165 | }, 166 | { 167 | "name" : "bridge", 168 | "tags" : [] 169 | }, 170 | { 171 | "name" : "briefcase", 172 | "tags" : ["work", "business"] 173 | }, 174 | { 175 | "name" : "cartoon-boy", 176 | "tags" : ["kids"] 177 | }, 178 | { 179 | "name" : "cathedral", 180 | "tags" : [] 181 | }, 182 | { 183 | "name" : "checked-2", 184 | "tags" : ["task", "tick"] 185 | }, 186 | { 187 | "name" : "children", 188 | "tags" : ["kids"] 189 | }, 190 | { 191 | "name" : "chisel-tip-marker", 192 | "tags" : ["writing"] 193 | }, 194 | { 195 | "name" : "circled-menu", 196 | "tags" : ["topic"] 197 | }, 198 | { 199 | "name" : "coach", 200 | "tags" : ["training"] 201 | }, 202 | { 203 | "name" : "code", 204 | "tags" : ["programming", "computer-science"] 205 | }, 206 | { 207 | "name" : "code-file", 208 | "tags" : ["programming", "computer-science"] 209 | }, 210 | { 211 | "name" : "combo-chart--v2", 212 | "tags" : ["business"] 213 | }, 214 | { 215 | "name" : "concept", 216 | "tags" : ["idea"] 217 | }, 218 | { 219 | "name" : "cottage", 220 | "tags" : ["home"] 221 | }, 222 | { 223 | "name" : "critical-thinking", 224 | "tags" : ["brain"] 225 | }, 226 | { 227 | "name" : "crowdfunding", 228 | "tags" : [] 229 | }, 230 | { 231 | "name" : "day-view", 232 | "tags" : ["calendar"] 233 | }, 234 | { 235 | "name" : "development-skill", 236 | "tags" : ["personal-growth"] 237 | }, 238 | { 239 | "name" : "document", 240 | "tags" : ["file"] 241 | }, 242 | { 243 | "name" : "encashment-car", 244 | "tags" : ["finance", "money", "transport"] 245 | }, 246 | { 247 | "name" : "experience-skill", 248 | "tags" : [] 249 | }, 250 | { 251 | "name" : "family", 252 | "tags" : [] 253 | }, 254 | { 255 | "name" : "father", 256 | "tags" : [] 257 | }, 258 | { 259 | "name" : "flag-filled", 260 | "tags" : [] 261 | }, 262 | { 263 | "name" : "floating-guru", 264 | "tags" : ["teacher", "medidation"] 265 | }, 266 | { 267 | "name" : "for-experienced", 268 | "tags" : [] 269 | }, 270 | { 271 | "name" : "glasses", 272 | "tags" : ["cool"] 273 | }, 274 | { 275 | "name" : "good-decision", 276 | "tags" : ["attitude"] 277 | }, 278 | { 279 | "name" : "good-quality", 280 | "tags" : ["like"] 281 | }, 282 | { 283 | "name" : "google-code", 284 | "tags" : ["programming", "computer-science"] 285 | }, 286 | { 287 | "name" : "google-play", 288 | "tags" : ["apps"] 289 | }, 290 | { 291 | "name" : "guru", 292 | "tags" : ["teacher", "medidation"] 293 | }, 294 | { 295 | "name" : "happy", 296 | "tags" : ["smile"] 297 | }, 298 | { 299 | "name" : "home", 300 | "tags" : ["family"] 301 | }, 302 | { 303 | "name" : "home-page", 304 | "tags" : ["family"] 305 | }, 306 | { 307 | "name" : "idea", 308 | "tags" : ["think", "innovation"] 309 | }, 310 | { 311 | "name" : "idea-bank", 312 | "tags" : [] 313 | }, 314 | { 315 | "name" : "inbox", 316 | "tags" : [] 317 | }, 318 | { 319 | "name" : "info", 320 | "tags" : [] 321 | }, 322 | { 323 | "name" : "informatics", 324 | "tags" : [] 325 | }, 326 | { 327 | "name" : "innovation", 328 | "tags" : ["idea"] 329 | }, 330 | { 331 | "name" : "knowledge-sharing", 332 | "tags" : ["book", "education"] 333 | }, 334 | { 335 | "name" : "launched-rocket", 336 | "tags" : ["startup"] 337 | }, 338 | { 339 | "name" : "layers", 340 | "tags" : ["areas"] 341 | }, 342 | { 343 | "name" : "leader", 344 | "tags" : [] 345 | }, 346 | { 347 | "name" : "learning", 348 | "tags" : ["education"] 349 | }, 350 | { 351 | "name" : "like", 352 | "tags" : ["favourite", "favorite"] 353 | }, 354 | { 355 | "name" : "linked-file", 356 | "tags" : [] 357 | }, 358 | { 359 | "name" : "linkedin", 360 | "tags" : ["career"] 361 | }, 362 | { 363 | "name" : "magazine", 364 | "tags" : ["book", "education"] 365 | }, 366 | { 367 | "name" : "meditation-guru", 368 | "tags" : ["teacher", "calm"] 369 | }, 370 | { 371 | "name" : "menu", 372 | "tags" : [] 373 | }, 374 | { 375 | "name" : "micro", 376 | "tags" : ["music", "podcast"] 377 | }, 378 | { 379 | "name" : "microphone", 380 | "tags" : ["music", "podcast"] 381 | }, 382 | { 383 | "name" : "mind-map", 384 | "tags" : ["knowledge"] 385 | }, 386 | { 387 | "name" : "money-bag", 388 | "tags" : ["finance", "bank"] 389 | }, 390 | { 391 | "name" : "music", 392 | "tags" : [] 393 | }, 394 | { 395 | "name" : "network-document", 396 | "tags" : ["file"] 397 | }, 398 | { 399 | "name" : "new-job", 400 | "tags" : ["business"] 401 | }, 402 | { 403 | "name" : "new-post", 404 | "tags" : ["mail", "email"] 405 | }, 406 | { 407 | "name" : "ok", 408 | "tags" : ["done", "tick", "task"] 409 | }, 410 | { 411 | "name" : "organization-chart-people", 412 | "tags" : ["business"] 413 | }, 414 | { 415 | "name" : "overview-pages-1", 416 | "tags" : ["index", "toc", "contents"] 417 | }, 418 | { 419 | "name" : "overview-pages-4", 420 | "tags" : ["index", "toc", "contents"] 421 | }, 422 | { 423 | "name" : "parent-guardian", 424 | "tags" : ["family", "person"] 425 | }, 426 | { 427 | "name" : "pen", 428 | "tags" : ["writing"] 429 | }, 430 | { 431 | "name" : "permanent-job", 432 | "tags" : ["career"] 433 | }, 434 | { 435 | "name" : "person-male", 436 | "tags" : ["profile"] 437 | }, 438 | { 439 | "name" : "personal-growth", 440 | "tags" : [] 441 | }, 442 | { 443 | "name" : "pi", 444 | "tags" : ["math"] 445 | }, 446 | { 447 | "name" : "pin", 448 | "tags" : ["start"] 449 | }, 450 | { 451 | "name" : "pranava", 452 | "tags" : ["india"] 453 | }, 454 | { 455 | "name" : "price-tag", 456 | "tags" : ["money", "promotion", "deal"] 457 | }, 458 | { 459 | "name" : "prize", 460 | "tags" : ["award", "certificate", "achieve"] 461 | }, 462 | { 463 | "name" : "project", 464 | "tags" : ["progress"] 465 | }, 466 | { 467 | "name" : "psychology", 468 | "tags" : ["spirituality"] 469 | }, 470 | { 471 | "name" : "quill-with-ink", 472 | "tags" : [] 473 | }, 474 | { 475 | "name" : "quote", 476 | "tags" : [] 477 | }, 478 | { 479 | "name" : "react-native", 480 | "tags" : ["app"] 481 | }, 482 | { 483 | "name" : "read", 484 | "tags" : ["book", "education"] 485 | }, 486 | { 487 | "name" : "reading", 488 | "tags" : ["book", "education"] 489 | }, 490 | { 491 | "name" : "rocket", 492 | "tags" : ["startup", "app"] 493 | }, 494 | { 495 | "name" : "scholarship", 496 | "tags" : ["school", "education"] 497 | }, 498 | { 499 | "name" : "school", 500 | "tags" : ["book", "education"] 501 | }, 502 | { 503 | "name" : "scroll", 504 | "tags" : [] 505 | }, 506 | { 507 | "name" : "settings", 508 | "tags" : [] 509 | }, 510 | { 511 | "name" : "sheets", 512 | "tags" : ["apps"] 513 | }, 514 | { 515 | "name" : "smart-playlist", 516 | "tags" : ["music"] 517 | }, 518 | { 519 | "name" : "solar-cross", 520 | "tags" : [] 521 | }, 522 | { 523 | "name" : "source-code", 524 | "tags" : ["computer-science", "programming"] 525 | }, 526 | { 527 | "name" : "space-shuttle", 528 | "tags" : ["startup"] 529 | }, 530 | { 531 | "name" : "spiral-bound-booklet", 532 | "tags" : ["book", "education"] 533 | }, 534 | { 535 | "name" : "star-of-david", 536 | "tags" : ["favorite","favourite"] 537 | }, 538 | { 539 | "name" : "student-female", 540 | "tags" : ["school", "education"] 541 | }, 542 | { 543 | "name" : "student-male", 544 | "tags" : ["school", "education"] 545 | }, 546 | { 547 | "name" : "suitcase", 548 | "tags" : ["business", "work"] 549 | }, 550 | { 551 | "name" : "sun", 552 | "tags" : ["bright"] 553 | }, 554 | { 555 | "name" : "synagogue", 556 | "tags" : [] 557 | }, 558 | { 559 | "name" : "table-of-content", 560 | "tags" : ["list", "menu"] 561 | }, 562 | { 563 | "name" : "tabletop-radio", 564 | "tags" : ["podcast"] 565 | }, 566 | { 567 | "name" : "tag-window", 568 | "tags" : [] 569 | }, 570 | { 571 | "name" : "thinking-bubble", 572 | "tags" : ["think", "idea"] 573 | }, 574 | { 575 | "name" : "time-management", 576 | "tags" : [] 577 | }, 578 | { 579 | "name" : "todo-list", 580 | "tags" : ["task", "goal"] 581 | }, 582 | { 583 | "name" : "training", 584 | "tags" : ["teach", "education" ] 585 | }, 586 | { 587 | "name" : "university", 588 | "tags" : ["education", "school"] 589 | }, 590 | { 591 | "name" : "video", 592 | "tags" : ["play"] 593 | }, 594 | { 595 | "name" : "video-call", 596 | "tags" : [] 597 | }, 598 | { 599 | "name" : "video-gallery", 600 | "tags" : [] 601 | }, 602 | { 603 | "name" : "video-playlist", 604 | "tags" : [] 605 | }, 606 | { 607 | "name" : "visible", 608 | "tags" : ["eye"] 609 | }, 610 | { 611 | "name" : "visualization-skill", 612 | "tags" : [] 613 | }, 614 | { 615 | "name" : "weak-financial-growth", 616 | "tags" : ["money"] 617 | }, 618 | { 619 | "name" : "web-design", 620 | "tags" : ["programming", "computer-science"] 621 | }, 622 | { 623 | "name" : "youtube", 624 | "tags" : ["social"] 625 | }, 626 | { 627 | "name" : "clock", 628 | "tags" : ["time"] 629 | }, 630 | { 631 | "name" : "example", 632 | "tags" : [""] 633 | }, 634 | { 635 | "name" : "proactivity", 636 | "tags" : ["motivation"] 637 | } 638 | , 639 | { 640 | "name" : "saving-book", 641 | "tags" : ["course", "education"] 642 | }, 643 | { 644 | "name" : "classroom", 645 | "tags" : ["course", "education"] 646 | }, 647 | { 648 | "name" : "note", 649 | "tags" : ["read"] 650 | }, 651 | { 652 | "name" : "storytelling", 653 | "tags" : [""] 654 | }, 655 | { 656 | "name" : "activity-history", 657 | "tags" : [""] 658 | }, 659 | { 660 | "name" : "historical", 661 | "tags" : [""] 662 | }, 663 | { 664 | "name" : "blockchain-technology", 665 | "tags" : [""] 666 | }, 667 | { 668 | "name" : "controller", 669 | "tags" : [""] 670 | }, 671 | { 672 | "name" : "literature", 673 | "tags" : [""] 674 | }, 675 | { 676 | "name" : "manual", 677 | "tags" : [""] 678 | }, 679 | { 680 | "name" : "library", 681 | "tags" : ["education"] 682 | }, 683 | { 684 | "name" : "choir", 685 | "tags" : ["music"] 686 | }, 687 | { 688 | "name" : "bass-clef", 689 | "tags" : ["music"] 690 | }, 691 | { 692 | "name" : "slr-camera", 693 | "tags" : ["photography", "photo", "picture"] 694 | }, 695 | { 696 | "name" : "video-call--v1", 697 | "tags" : ["camera"] 698 | }, 699 | { 700 | "name" : "worldwide-location--v1", 701 | "tags" : ["location", "pin"] 702 | }, 703 | { 704 | "name" : "housekeeper-female", 705 | "tags" : ["cleaning", "broom"] 706 | }, 707 | { 708 | "name" : "clean", 709 | "tags" : ["stars"] 710 | }, 711 | { 712 | "name" : "broom--v1", 713 | "tags" : ["cleaning"] 714 | }, 715 | { 716 | "name" : "geography--v1", 717 | "tags" : ["global", "language", "world", "globe"] 718 | }, 719 | { 720 | "name" : "board-game-figure", 721 | "tags" : ["meeple"] 722 | }, 723 | { 724 | "name" : "idea--v1", 725 | "tags" : ["idea", "lightbulb"] 726 | }, 727 | { 728 | "name" : "battle", 729 | "tags" : ["objects"] 730 | }, 731 | { 732 | "name" : "plant-under-rain", 733 | "tags" : ["grow"] 734 | }, 735 | { 736 | "name" : "idea-sharing", 737 | "tags" : ["creativity"] 738 | }, 739 | { 740 | "name" : "barbell", 741 | "tags" : ["fitness"] 742 | }, 743 | { 744 | "name" : "airport--v1", 745 | "tags" : ["travel"] 746 | }, 747 | { 748 | "name" : "database--v1", 749 | "tags" : ["programming", "computer-science"] 750 | }, 751 | { 752 | "name" : "mac-os", 753 | "tags" : ["logos"] 754 | }, 755 | { 756 | "name" : "flax-seeds", 757 | "tags" : ["food"] 758 | }, 759 | { 760 | "name" : "natural-food--v1", 761 | "tags" : ["food"] 762 | }, 763 | { 764 | "name" : "prawn--v1", 765 | "tags" : ["food"] 766 | }, 767 | { 768 | "name" : "carrot--v1", 769 | "tags" : ["food"] 770 | }, 771 | { 772 | "name" : "thanksgiving--v1", 773 | "tags" : ["food"] 774 | }, 775 | { 776 | "name" : "piano", 777 | "tags" : ["music"] 778 | }, 779 | { 780 | "name" : "external-link--v1", 781 | "tags" : ["resource"] 782 | }, 783 | { 784 | "name" : "creativity", 785 | "tags" : ["brain", "idea"] 786 | }, 787 | { 788 | "name" : "decision--v1", 789 | "tags" : ["thinking"] 790 | }, 791 | { 792 | "name" : "cloud--v1", 793 | "tags" : ["salesforce"] 794 | }, 795 | { 796 | "name" : "calendar--v1", 797 | "tags" : ["productivity"] 798 | }, 799 | { 800 | "name" : "keyshot-logo", 801 | "tags" : ["aperture","focus","camera"] 802 | }, 803 | { 804 | "name" : "business-network", 805 | "tags" : ["business network"] 806 | }, 807 | { 808 | "name" : "increase", 809 | "tags" : ["increase", "growth"] 810 | } 811 | ] 812 | } 813 | } 814 | ] 815 | } 816 | -------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | npm run build 2 | npm run export 3 | npm run deploy 4 | 5 | -------------------------------------------------------------------------------- /gallery/AppUtils.ts: -------------------------------------------------------------------------------- 1 | import Constants from './Constants' 2 | 3 | export function getCurrentPageUrl (urlPath: string) { 4 | return Constants.APP_BASE_URL + urlPath 5 | } 6 | -------------------------------------------------------------------------------- /gallery/Constants.ts: -------------------------------------------------------------------------------- 1 | export default class Constants { 2 | public static readonly IS_PROD = process.env.NODE_ENV === 'production' 3 | public static readonly APP_BASE_URL = Constants.IS_PROD ? 'https://notion.erajasekar.com' : 'http://localhost:3333' 4 | } 5 | -------------------------------------------------------------------------------- /gallery/UtilFunctions.ts: -------------------------------------------------------------------------------- 1 | import { IIconInfo } from '../gallery/config' 2 | 3 | export function getIconUrl (baseUrl: string, style: string, size: string, color: string, name: string) { 4 | return `${baseUrl}/${style}/${size}/${color.substring(1)}/${name}.png` 5 | } 6 | 7 | export function filterIconByNameOrTag (icon: IIconInfo, searchKeyword: string) { 8 | const keyword = searchKeyword.toLowerCase() 9 | return icon.name.includes(keyword) || icon.tags.findIndex((t: any) => t.includes(keyword)) >= 0 10 | } 11 | -------------------------------------------------------------------------------- /gallery/config.ts: -------------------------------------------------------------------------------- 1 | import data from '../config/icons-config.json' 2 | 3 | export interface IIconInfo { 4 | name: string 5 | tags: Array 6 | } 7 | 8 | export class IconInfo implements IIconInfo { 9 | name: string 10 | tags: Array 11 | 12 | constructor (name: any, tags: any) { 13 | this.name = name 14 | this.tags = tags 15 | } 16 | } 17 | 18 | export class IconConfig { 19 | url: string 20 | size: string 21 | style: string 22 | icons : Array 23 | 24 | constructor () { 25 | const icon8Data: any = data.config[0].icon8 26 | this.url = icon8Data.url 27 | this.size = icon8Data.size 28 | this.style = icon8Data.style 29 | this.icons = [] 30 | icon8Data.icons.forEach((ele: any) => { 31 | this.icons.push(new IconInfo(ele.name, ele.tags)) 32 | }) 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /icon-names.txt: -------------------------------------------------------------------------------- 1 | add-to-favorites.png 2 | attach.png 3 | baby.png 4 | ball-point-pen.png 5 | bonds.png 6 | book-shelf.png 7 | bookmark.png 8 | boy.png 9 | brain.png 10 | brainstorm.png 11 | brainstorm-skill.png 12 | bridge.png 13 | briefcase.png 14 | cartoon-boy.png 15 | cathedral.png 16 | checked-2.png 17 | children.png 18 | chisel-tip-marker.png 19 | circled-menu.png 20 | coach.png 21 | code.png 22 | code-file.png 23 | concept.png 24 | cottage.png 25 | critical-thinking.png 26 | crowdfunding.png 27 | day-view.png 28 | development-skill.png 29 | document.png 30 | encashment-car.png 31 | experience-skill.png 32 | family.png 33 | father.png 34 | flag-filled.png 35 | floating-guru.png 36 | for-experienced.png 37 | glasses.png 38 | good-decision.png 39 | good-quality.png 40 | google-code.png 41 | google-play.png 42 | guru.png 43 | happy.png 44 | home.png 45 | home-page.png 46 | idea.png 47 | idea-bank.png 48 | inbox.png 49 | info.png 50 | informatics.png 51 | innovation.png 52 | knowledge-sharing.png 53 | launched-rocket.png 54 | layers.png 55 | leader.png 56 | learning.png 57 | like.png 58 | linked-file.png 59 | linkedin.png 60 | magazine.png 61 | meditation-guru.png 62 | menu.png 63 | micro.png 64 | microphone.png 65 | mind-map.png 66 | money-bag.png 67 | music.png 68 | network-document.png 69 | new-job.png 70 | new-post.png 71 | ok.png 72 | organization-chart-people.png 73 | overview-pages-1.png 74 | overview-pages-4.png 75 | parent-guardian.png 76 | pen.png 77 | permanent-job.png 78 | person-male.png 79 | personal-growth.png 80 | pi.png 81 | pin.png 82 | pranava.png 83 | price-tag.png 84 | prize.png 85 | project.png 86 | psychology.png 87 | quill-with-ink.png 88 | quote.png 89 | react-native.png 90 | read.png 91 | reading.png 92 | rocket.png 93 | scholarship.png 94 | school.png 95 | scroll.png 96 | settings.png 97 | sheets.png 98 | smart-playlist.png 99 | solar-cross.png 100 | source-code.png 101 | space-shuttle.png 102 | spiral-bound-booklet.png 103 | star-of-david.png 104 | student-female.png 105 | student-male.png 106 | suitcase.png 107 | sun.png 108 | synagogue.png 109 | table-of-content.png 110 | tabletop-radio.png 111 | tag-window.png 112 | thinking-bubble.png 113 | time-management.png 114 | todo-list.png 115 | training.png 116 | transformation-skill.png 117 | type.png 118 | university.png 119 | video.png 120 | video-call.png 121 | video-gallery.png 122 | video-playlist.png 123 | visible.png 124 | visualization-skill.png 125 | weak-financial-growth.png 126 | web-design.png 127 | youtube.png 128 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleNameMapper: { 3 | '^@/(.*)$': '/$1', 4 | '^~/(.*)$': '/$1', 5 | '^vue$': 'vue/dist/vue.common.js' 6 | }, 7 | moduleFileExtensions: [ 8 | 'ts', 9 | 'js', 10 | 'vue', 11 | 'json' 12 | ], 13 | transform: { 14 | '^.+\\.ts$': 'ts-jest', 15 | '^.+\\.js$': 'babel-jest', 16 | '.*\\.(vue)$': 'vue-jest' 17 | }, 18 | collectCoverage: true, 19 | collectCoverageFrom: [ 20 | '/components/**/*.vue', 21 | '/pages/**/*.vue' 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "~/*": ["./*"], 6 | "@/*": ["./*"], 7 | "~~/*": ["./*"], 8 | "@@/*": ["./*"] 9 | } 10 | }, 11 | "exclude": ["node_modules", ".nuxt", "dist"] 12 | } 13 | -------------------------------------------------------------------------------- /layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 25 | 26 | 58 | -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | 2 | const description = 'Notion Icons is a tool to easily add beautiful Icons to your Notion Notes' 3 | const baseUrl = 'https://notion.erajasekar.com' 4 | const siteName = 'Notion Icons' 5 | const baseURI = '/' 6 | 7 | export default { 8 | /* 9 | ** Nuxt rendering mode 10 | ** See https://nuxtjs.org/api/configuration-mode 11 | */ 12 | mode: 'universal', 13 | 14 | router: { 15 | base: baseURI 16 | }, 17 | 18 | server: { 19 | port: 3333, 20 | host: '0.0.0.0' 21 | }, 22 | /* 23 | ** Nuxt target 24 | ** See https://nuxtjs.org/api/configuration-target 25 | */ 26 | target: 'static', 27 | /* 28 | ** Headers of the page 29 | ** See https://nuxtjs.org/api/configuration-head 30 | */ 31 | head: { 32 | title: process.env.npm_package_description || '', 33 | meta: [ 34 | { charset: 'utf-8' }, 35 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 36 | { hid: 'description', name: 'description', description }, 37 | { name: 'keywords', content: 'Notion, Icons, Note Taking, Notes' }, 38 | { name: 'robots', content: 'index, follow' }, 39 | { name: 'google-site-verification', content: 'aj7GVm50EmiN_a1iRTW1gizUwHizAJqkNSWy0dz7Xzg' }, 40 | { name: 'author', content: 'Rajasekar Elango' }, 41 | { property: 'og:type', content: 'website' }, 42 | { property: 'og:title', content: process.env.npm_package_description }, 43 | { property: 'og:site_name', content: siteName }, 44 | { property: 'og:description', content: description }, 45 | { property: 'og:image', content: baseUrl + '/social-facebook.jpg' }, 46 | { name: 'twitter:card', content: 'summary_large_image' }, 47 | { name: 'twitter:title', content: process.env.npm_package_description }, 48 | { property: 'twitter:site', content: siteName }, 49 | { name: 'twitter:description', content: description }, 50 | { name: 'twitter:image', content: baseUrl + '/social-twitter1.jpg' } 51 | ], 52 | link: [ 53 | { rel: 'icon', type: 'image/x-icon', href: baseURI + 'favicon.ico' } 54 | ] 55 | }, 56 | /* 57 | ** Global CSS 58 | */ 59 | css: [ 60 | '@/assets/scss/main.scss' 61 | ], 62 | /* 63 | ** Plugins to load before mounting the App 64 | ** https://nuxtjs.org/guide/plugins 65 | */ 66 | plugins: ['~/plugins/global-components.ts' 67 | ], 68 | /* 69 | ** Auto import components 70 | ** See https://nuxtjs.org/api/configuration-components 71 | */ 72 | components: true, 73 | /* 74 | ** Nuxt.js dev-modules 75 | */ 76 | buildModules: [ 77 | '@nuxt/typescript-build', 78 | '@nuxtjs/eslint-module', 79 | '@nuxtjs/tailwindcss', 80 | '@nuxtjs/google-analytics' 81 | ], 82 | 83 | googleAnalytics: { 84 | id: 'UA-53694809-5' 85 | }, 86 | 87 | /* 88 | ** Nuxt.js modules 89 | */ 90 | modules: [ 91 | // Doc: https://buefy.github.io/#/documentation 92 | 'nuxt-buefy', 93 | 'vue-swatches/nuxt', 94 | ['vue-scrollto/nuxt', { duration: 300 }] 95 | ], 96 | /* 97 | ** Build configuration 98 | ** See https://nuxtjs.org/api/configuration-build/ 99 | */ 100 | build: { 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "notion-icons", 3 | "version": "1.0.0", 4 | "private": true, 5 | "description": "Notion Icons", 6 | "author": "Rajasekar Elango", 7 | "scripts": { 8 | "dev": "nuxt-ts --port 3333", 9 | "build": "nuxt-ts build", 10 | "start": "nuxt-ts start --port 3333", 11 | "export": "nuxt-ts export", 12 | "serve": "nuxt-ts serve --port 3333", 13 | "generate": "nuxt generate", 14 | "deploy": "gh-pages -d dist -t true", 15 | "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .", 16 | "lint": "npm run lint:js", 17 | "test": "jest" 18 | }, 19 | "dependencies": { 20 | "@nuxt/typescript-runtime": "^0.4.10", 21 | "node-sass": "^4.14.1", 22 | "nuxt": "^2.13.0", 23 | "nuxt-buefy": "^0.3.31", 24 | "nuxt-clipboard2": "^0.2.1", 25 | "nuxt-property-decorator": "^2.7.2", 26 | "sass-loader": "^9.0.0", 27 | "vue-scrollto": "^2.18.2", 28 | "vue-swatches": "^2.1.0" 29 | }, 30 | "devDependencies": { 31 | "@nuxt/typescript-build": "^1.0.3", 32 | "@nuxtjs/eslint-config": "^3.0.0", 33 | "@nuxtjs/eslint-config-typescript": "^2.0.0", 34 | "@nuxtjs/eslint-module": "^2.0.0", 35 | "@nuxtjs/google-analytics": "^2.4.0", 36 | "@nuxtjs/tailwindcss": "^2.0.0", 37 | "@vue/test-utils": "^1.0.3", 38 | "babel-core": "7.0.0-bridge.0", 39 | "babel-eslint": "^10.1.0", 40 | "babel-jest": "^26.0.1", 41 | "eslint": "^7.2.0", 42 | "eslint-plugin-nuxt": "^1.0.0", 43 | "gh-pages": "^3.1.0", 44 | "jest": "^26.0.1", 45 | "ts-jest": "^26.1.0", 46 | "vue-jest": "^3.0.4" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /pages/about.vue: -------------------------------------------------------------------------------- 1 | 321 | 322 | 354 | 403 | -------------------------------------------------------------------------------- /pages/icons.vue: -------------------------------------------------------------------------------- 1 | 77 | 78 | 178 | 179 | 215 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 |