├── .gitignore
├── package.json
├── src
    ├── index.js
    └── views
    │   └── index.ejs
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "icon-preview",
 3 |   "type": "module",
 4 |   "version": "1.1.0",
 5 |   "description": "",
 6 |   "main": "src/index.js",
 7 |   "bin": "./src/index.js",
 8 |   "keywords": [],
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "ejs": "^3.1.10",
13 |     "express": "^5.1.0",
14 |     "recursive-readdir": "^2.2.3"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | import fs from "fs/promises";
 4 | import path from "path";
 5 | import recursive from "recursive-readdir";
 6 | import express from "express";
 7 | import { fileURLToPath } from "url";
 8 | import { dirname } from "path";
 9 | 
10 | let iconPath = [];
11 | const __filename = fileURLToPath(import.meta.url);
12 | const __dirname = dirname(__filename);
13 | 
14 | const processIconFiles = async () => {
15 |   let files = await recursive(process.argv[2]);
16 |   files = files.filter((file) => file.endsWith(".svg"));
17 | 
18 |   for (const file of files) {
19 |     const content = await fs.readFile(path.resolve("./", file), {
20 |       encoding: "utf8",
21 |     });
22 |     const name = file.split("/").at(-1);
23 |     iconPath.push({ fullPath: file, name, content });
24 |   }
25 | };
26 | 
27 | processIconFiles();
28 | const app = express();
29 | app.set("view engine", "ejs");
30 | app.set("views", path.join(__dirname, "./views"));
31 | 
32 | app.get("/", (req, res) => {
33 |   res.render("index", { icons: iconPath });
34 | });
35 | 
36 | const startTheServer = (port) => {
37 |   try {
38 |     app
39 |       .listen(port)
40 |       .on("error", (e) => {
41 |         if (e.code === "EADDRINUSE") startTheServer(port + 1);
42 |       })
43 |       .on("listening", () => {
44 |         console.log(
45 |           `${process.argv[2]} is available at http://localhost:${port}`
46 |         );
47 |       });
48 |   } catch (error) {}
49 | };
50 | 
51 | const DEFAULT_PORT = 4000;
52 | startTheServer(DEFAULT_PORT);
53 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🎨 icon-preview
 2 | 
 3 | Easily preview all your SVG icons in one beautiful local webpage!
 4 | 
 5 | ![icon-preview demo](https://github.com/user-attachments/assets/d87b1f88-be4f-45c4-9f4a-0173e6232cee)
 6 | 
 7 | ## 🚀 Features
 8 | 
 9 | - 🔍 Recursively scans a folder for `.svg` files  
10 | - 🖼️ Generates a neat preview page of all your icons  
11 | - 🌐 Serves the preview locally in your browser  
12 | - ⚡ Fast and easy to use with a single CLI command
13 | 
14 | ## 📦 Installation
15 | 
16 | ```bash
17 | npm install -g icon-preview
18 | ````
19 | 
20 | ## 🧪 Usage
21 | 
22 | Just run the CLI with the path to your SVG directory:
23 | 
24 | ```bash
25 | icon-preview ./path/to/icons
26 | ```
27 | 
28 | This will:
29 | 
30 | 1. Recursively find all `.svg` files in the given path
31 | 2. Start a local web server
32 | 3. Open a preview page in your default browser with all the icons
33 | 
34 | ## 🌈 Example
35 | 
36 | ```bash
37 | icon-preview ./assets/icons
38 | ```
39 | 
40 | Will show a webpage like this:
41 | 
42 | ```
43 | 📁 assets/icons
44 | ├── arrows/
45 | │   ├── arrow-left.svg
46 | │   └── arrow-right.svg
47 | ├── social/
48 | │   ├── twitter.svg
49 | │   └── github.svg
50 | └── logo.svg
51 | ```
52 | 
53 | And the preview page will display all 5 icons in a grid 💫
54 | 
55 | ## 🛠️ Development
56 | 
57 | ```bash
58 | git clone https://github.com/your-username/icon-preview
59 | cd icon-preview
60 | npm install
61 | npm run dev
62 | ```
63 | 
64 | ## 🤝 Contributing
65 | 
66 | Found a bug or want to add a feature? PRs and issues are welcome!
67 | 
68 | ## 📄 License
69 | 
70 | MIT — Free to use, modify, and share.
71 | 


--------------------------------------------------------------------------------
/src/views/index.ejs:
--------------------------------------------------------------------------------
 1 | <!-- Home.ejs -->
 2 | <!DOCTYPE html>
 3 | <html>
 4 |   <head>
 5 |     <title>Icons</title>
 6 |     <style type="text/css" media="screen">
 7 |       *{
 8 |         box-sizing: border-box;
 9 |         padding: 0;
10 |         margin: 0;
11 |         font-family: sans-serif;
12 |       }
13 |       body {
14 |         background-color: #fff;
15 |         padding: 24px;
16 |       }
17 |       .container{
18 |         display: grid;
19 |         grid-template-columns: repeat(7,1fr);
20 |         max-width: 1400px;
21 |         margin:0 auto;
22 |         gap: 24px;
23 |       }
24 |       .svg-item{
25 |         display: flex;
26 |         flex-direction: column;
27 |         gap: 12px;
28 |         width: fit-content;
29 |         margin: 0 auto;
30 |         align-items: center;
31 |         justify-content: center;
32 |         cursor: pointer;
33 |         transition: all 200ms ease;
34 |       }
35 |       .svg-item:active{
36 |         transform: scale(1.2);
37 |       }
38 |       .svg-item .title{
39 |         font-size: 12px;
40 |       }
41 |       .svg-item .svg{
42 |         display: flex;
43 |         justify-content: center;
44 |         align-items: center;
45 |         width: 80px;
46 |         height: 80px;
47 |         border-radius: 8px;
48 |         background: linear-gradient(45deg, white, #d8d8d8);
49 |         border:1px solid #00000010;
50 |       }
51 |       .svg-item .svg svg{
52 |         width: 50px;
53 |         height: 50px;
54 |       }
55 |     </style>
56 |   </head>
57 | 
58 |   <body>
59 |     <div class="container">
60 |       <% icons.forEach((icon)=>{%>
61 |         <div class="svg-item" title="<%= icon.fullPath %>">
62 |           <div class="svg"><%-icon.content%></div>
63 |           <span class="title"><%=icon.name%></span>
64 |         </div>
65 |       <%});%>
66 |     </ul>
67 | 
68 |     <script>
69 |       document.querySelectorAll('.svg-item').forEach((item)=>{
70 |         item.addEventListener("click",()=>{
71 |           navigator.clipboard.writeText(item.title)
72 |         })
73 |       })
74 |     </script>
75 |   </body>
76 | </html>
77 | 


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