https://github.com/foo-dogsquared/simple-icons-pwa

An alternative interface to the official Simple Icons website that offers more functions.
https://github.com/foo-dogsquared/simple-icons-pwa

javascript node pwa simple-icons vue

Last synced: 2 months ago
JSON representation

An alternative interface to the official Simple Icons website that offers more functions.

• Host: GitHub
• URL: https://github.com/foo-dogsquared/simple-icons-pwa
• Owner: foo-dogsquared
• Created: 2018-10-04T02:48:42.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T21:39:06.000Z (over 2 years ago)
• Last Synced: 2025-01-11T17:22:08.214Z (4 months ago)
• Topics: javascript, node, pwa, simple-icons, vue
• Language: Vue
• Homepage: https://simple-icons-pwa.netlify.com/
• Size: 2.16 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 28
• Metadata Files:
  • Readme: README.adoc
  • Changelog: CHANGELOG.adoc

Awesome Lists containing this project

README

        
= Simple SVG Sprites

An alternative interface for the https://simpleicons.org/[official Simple Icons website] with additional features. 

The website uses the official icon set from the https://github.com/simple-icons/simple-icons/[GitHub repo]. 

== Features

* Quickly create a SVG symbol sheet from the Simple Icons icon set. 

* It works as a progressive web app (PWA) and can work in offline mode. 

* Download the icons through an https://css-tricks.com/svg-symbol-good-choice-icons/[SVG symbol spritesheet] or individual files inside of a ZIP file. 

== Development build 

For future references, there is the following table of the dependencies and their version used as of the starting development of the remake. 

[cols="3*", options="header"]

|===

| Dependency 

| Minimum version 

| Notes 

| Node 

| `8.9.0` 

| Minimum version is based from https://github.com/webpack-contrib/sass-loader/releases/tag/v8.0.0[`sass-loader` version 8]. 

|===

In order to set up this repo in the development environment, do the following:

* Fork the repo into your account.

* Clone the forked repo into your machine (`git clone `). 

* Go to the cloned repo directory (`cd `). 

* Pull the dependencies (`npm i`). 

* Open the server and build the local version of the site (`npm run serve`). 

=== Technology overview 

* The project is scaffolded from https://cli.vuejs.org[**Vue CLI service**]. 

* It uses https://vuejs.org/[**Vue.js**] for the front-end web components library. 

* It uses https://webpack.js.org/[**Webpack**] for bundling the app for offline use. 

* It uses https://babeljs.io/[**Babel**] for transpiling JS code into older versions for compatability. 

* Uses the official https://github.com/simple-icons/simple-icons/[**Simple Icons library**]. 

* Creates the zip files with https://github.com/Stuk/jszip[**JSZip**]. 

* Client-side file generation is made possible with https://github.com/eligrey/FileSaver.js[**FileSaver.js**]. 

=== Codebase tour 

The codebase is pretty simple. 

Here are the files that needs the most attention in no particular order. 

[cols="3*", options="header"] 

|===

| File 

| Function 

| Notes 

| `src/constants.js` 

| Contains the constants to be used throughout the app. 

| 

| `src/components/Main.vue` 

| The main component that contains the icon grid, app controls, and the search bar of the single-page website. 

| 

| `src/components/Icon.vue` 

| The icon component. (Very helpful.) 

| 

| `src/components/index.js` 

| The index file that exports the components. 

Any new components have to be added in this file. 

| 

|===