Icon Shelf

Fantastic icon manager for web developers.

Features . Road Map . Development . Installation . Privacy

Icon Shelf is a free SVG icon manager for developers.

Working on a frontend project and struggling with finding your icons and importing them. Worry not Icon shelf is here to help you. Link the icons folder of your project to Icon Shelf and see all your icons in an easily previewable manner. And with a click of a button copy to clipboard the import statement for the icon.

Features

⭐️ Easy to view icon previews

⭐️ Searchable icon library

⭐️ File-based (adding, deleting, modifying icons in app get reflected in file-system as well.)

⭐️ Customize icon import statement texts. Copy as react, vue, ember etc

⭐️ Cross platform: Windows, Mac and Linux

🤙 Development

This app is built using React, Electron, and Typescript. We use Vite for bundling and building.

Some of the main packages that we use are:

• CSS - tailwindcss
• caching - react-query
• editor - codemirror
• db - dexie

⚡ Quick Setup

1. Install all app dependencies.

   npm install

2. Start the development.

   npm run watch

Project Structure

The structure of this template is very similar to the structure of a monorepo.

The entire source code of the program is divided into three modules (packages) that are bundled each independently:

• packages/main Electron main script.
• packages/preload Used in BrowserWindow.webPreferences.preload. See Checklist: Security Recommendations.
• packages/renderer Electron web page.

Build web resources

Packages main and preload are built in library mode as it is a simple javascript. renderer package build as regular web app.

The build of web resources is performed in the scripts/build.js. Its analogue is a sequential call to vite build for each package.

Building for Production

1. Package.

   npm run compile

2. A dist folder would be created. In which your packaged app would be present.

Working with dependencies

According to Electron's security guidelines, Node.js integration is disabled for remote content. This means that you cannot call any Node.js api in the packages/renderer directly.

But you can still use the imports in the source code.

The fact is that Vite analyze your code, finds all the imported dependencies, applies tree shaking, optimization to them and bundle them inside the output source files. So when you write something like that:

// source.ts
import { createApp } from 'vue';
createApp();

It turns into:

// bundle.js
function createApp() { ... }
createApp()

And there are really no imports left in runtime.

But it doesn't always work. Vite is not able to bundle Node built-in modules, or some special modules because of their architecture, or Electron itself.

Modules that Vite is unable to bundle are forced to be supplied as external. External modules are not optimized and their imports remain in runtime. So when you write something like that:

// source.ts
import { writeFile } from 'fs';
writeFile();

It will remain as is and lead to runtime-error because Electron cannot import modules from node_modules in the renderer.

// bundle.js
import { writeFile } from 'fs'; // TypeError: Failed to resolve module specifier "fs". Relative references must start with either "/", "./", or "../".
writeFile();

Using external modules in renderer

To use external modules in Renderer you must describe the interface in the packages/preload where Node.js api is allowed:

// packages/preload/src/index.ts
import type { BinaryLike } from 'crypto';
import { createHash } from 'crypto';

contextBridge.exposeInMainWorld('nodeCrypto', {
  sha256sum(data: BinaryLike) {
    const hash = createHash('sha256');
    hash.update(data);
    return hash.digest('hex');
  },
});

The dts-cb utility will automatically generate an interface for TS:

// packages/preload/exposedInMainWorld.d.ts
interface Window {
  readonly nodeCrypto: { sha256sum(data: import('crypto').BinaryLike): string };
}

And now, you can safely use the registered method:

// packages/renderer/src/App.vue
window.nodeCrypto.sha256sum('data');

Read more about Security Considerations.

💻 Installation

Available for Windows, macOS, and Linux.

Download the latest version from the Releases Page or from the 👉 Download Page .

Please consider starring this project to show your 💙 and support.

🛡️ Privacy

This app has analytics that will track number of users and platform OS only.

Contributing

See Contributing Guide.

Please adhere to this project's code of conduct.