{"id":13406129,"url":"https://github.com/Icon-Shelf/icon-shelf","last_synced_at":"2025-03-14T10:32:28.600Z","repository":{"id":43074371,"uuid":"376553876","full_name":"Icon-Shelf/icon-shelf","owner":"Icon-Shelf","description":"SVG icon manager for developers.","archived":false,"fork":false,"pushed_at":"2023-11-18T09:52:26.000Z","size":5533,"stargazers_count":275,"open_issues_count":12,"forks_count":26,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-04-13T21:42:53.915Z","etag":null,"topics":["electron","icon-manager","icon-shelf","icons","react","svg"],"latest_commit_sha":null,"homepage":"https://icon-shelf.github.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Icon-Shelf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"open_collective":"icon-shelf"}},"created_at":"2021-06-13T13:43:51.000Z","updated_at":"2024-04-11T15:59:07.000Z","dependencies_parsed_at":"2023-12-21T16:44:11.127Z","dependency_job_id":"847a93d8-44f0-4d8d-acf3-7b1bd1543568","html_url":"https://github.com/Icon-Shelf/icon-shelf","commit_stats":{"total_commits":235,"total_committers":26,"mean_commits":9.038461538461538,"dds":0.4893617021276596,"last_synced_commit":"d2b890b3d83509ee795838478cb611a763e1fca3"},"previous_names":[],"tags_count":39,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Icon-Shelf%2Ficon-shelf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Icon-Shelf%2Ficon-shelf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Icon-Shelf%2Ficon-shelf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Icon-Shelf%2Ficon-shelf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Icon-Shelf","download_url":"https://codeload.github.com/Icon-Shelf/icon-shelf/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243562195,"owners_count":20311238,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["electron","icon-manager","icon-shelf","icons","react","svg"],"created_at":"2024-07-30T19:02:21.872Z","updated_at":"2025-03-14T10:32:27.933Z","avatar_url":"https://github.com/Icon-Shelf.png","language":"TypeScript","funding_links":["https://opencollective.com/icon-shelf"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://icon-shelf.github.io\"\u003e\n    \u003cimg src=\"buildResources/icons/128x128.png\" alt=\"Icon Shelf logo\" width=\"96\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eIcon Shelf\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003eFantastic icon manager for web developers.\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e\n  .\n  \u003ca href=\"https://github.com/Icon-Shelf/icon-shelf/projects/3\"\u003eRoad Map\u003c/a\u003e\n  .\n  \u003ca href=\"#call_me_hand-development\"\u003eDevelopment\u003c/a\u003e\n  .\n  \u003ca href=\"#computer-installation\"\u003eInstallation\u003c/a\u003e\n  .\n  \u003ca href=\"#shield-privacy\"\u003ePrivacy\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n   \u003ca href=\"https://icon-shelf.github.io/download\"\u003e\n      \u003cimage src=\"https://img.shields.io/github/downloads/Icon-Shelf/icon-shelf/total\" alt=\"Github downloads\" /\u003e\n   \u003c/a\u003e\n  \n   \u003ca href=\"https://github.com/Icon-Shelf/icon-shelf/blob/main/LICENSE\"\u003e\n      \u003cimage alt=\"license\" src=\"https://img.shields.io/github/license/Icon-Shelf/icon-shelf\"\u003e\n   \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cimg width=\"1554\" alt=\"icon-shelf\" src=\"https://user-images.githubusercontent.com/21201812/134767938-7f30e3b2-2ce1-4ed6-8a61-5df0607fe858.png\"\u003e\n\nIcon Shelf is a **free SVG icon manager** for developers.\n\nWorking on a frontend project and struggling with finding your icons and importing them. Worry not Icon shelf is here to help you.\nLink 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.\n\n\u003cbr\u003e\n\n## Features\n\n⭐️ Easy to view icon previews\n\n⭐️ Searchable icon library\n\n⭐️ File-based (adding, deleting, modifying icons in app get reflected in file-system as well.)\n\n⭐️ Customize icon import statement texts. Copy as react, vue, ember etc\n\n⭐️ Cross platform: Windows, Mac and Linux\n\n\u003cbr\u003e\n\n## :call_me_hand: Development\n\nThis app is built using [React](https://reactjs.org/), [Electron](https://www.electronjs.org/), and [Typescript](https://www.typescriptlang.org/). We use [Vite](https://vitejs.dev/) for bundling and building.\n\nSome of the main packages that we use are:\n\n- CSS - [tailwindcss](https://tailwindcss.com/)\n- caching - [react-query](https://react-query.tanstack.com/)\n- editor - [codemirror](https://codemirror.net/6/)\n- db - [dexie](https://dexie.org/)\n\n### :zap: Quick Setup\n\n1. Install all app dependencies.\n\n   ```sh\n   npm install\n   ```\n\n2. Start the development.\n\n   ```sh\n   npm run watch\n   ```\n\n### Project Structure\n\nThe structure of this template is very similar to the structure of a monorepo.\n\nThe entire source code of the program is divided into three modules (packages) that are bundled each independently:\n\n- [`packages/main`](packages/main)\n  Electron [**main script**](https://www.electronjs.org/docs/tutorial/quick-start#create-the-main-script-file).\n- [`packages/preload`](packages/preload)\n  Used in `BrowserWindow.webPreferences.preload`. See [Checklist: Security Recommendations](https://www.electronjs.org/docs/tutorial/security#2-do-not-enable-nodejs-integration-for-remote-content).\n- [`packages/renderer`](packages/renderer)\n  Electron [**web page**](https://www.electronjs.org/docs/tutorial/quick-start#create-a-web-page).\n\n### Build web resources\n\nPackages `main` and `preload` are built in [library mode](https://vitejs.dev/guide/build.html#library-mode) as it is a simple javascript.\n`renderer` package build as regular web app.\n\nThe build of web resources is performed in the [`scripts/build.js`](scripts/build.js). Its analogue is a sequential call to `vite build` for each package.\n\n### Building for Production\n\n1. Package.\n\n   ```sh\n   npm run compile\n   ```\n\n2. A dist folder would be created. In which your packaged app would be present.\n\n\u003cbr\u003e\n\n### Working with dependencies\n\nAccording to [Electron's security guidelines](https://www.electronjs.org/docs/tutorial/security#2-do-not-enable-nodejs-integration-for-remote-content), Node.js integration is disabled for remote content. This means that **you cannot call any Node.js api in the `packages/renderer` directly**.\n\nBut **you can still use the imports in the source code**.\n\nThe 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:\n\n```ts\n// source.ts\nimport { createApp } from 'vue';\ncreateApp();\n```\n\nIt turns into:\n\n```js\n// bundle.js\nfunction createApp() { ... }\ncreateApp()\n```\n\nAnd there are really no imports left in runtime.\n\n**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.\n\nModules that Vite is unable to bundle are forced to be supplied as `external`. External modules are not optimized and their imports remain in runtime.\nSo when you write something like that:\n\n```ts\n// source.ts\nimport { writeFile } from 'fs';\nwriteFile();\n```\n\nIt will remain as is and lead to runtime-error because Electron **cannot import modules from `node_modules`** in the renderer.\n\n```js\n// bundle.js\nimport { writeFile } from 'fs'; // TypeError: Failed to resolve module specifier \"fs\". Relative references must start with either \"/\", \"./\", or \"../\".\nwriteFile();\n```\n\n### Using external modules in renderer\n\nTo use external modules in Renderer you **must** describe the interface in the `packages/preload` where Node.js api is allowed:\n\n```ts\n// packages/preload/src/index.ts\nimport type { BinaryLike } from 'crypto';\nimport { createHash } from 'crypto';\n\ncontextBridge.exposeInMainWorld('nodeCrypto', {\n  sha256sum(data: BinaryLike) {\n    const hash = createHash('sha256');\n    hash.update(data);\n    return hash.digest('hex');\n  },\n});\n```\n\nThe [`dts-cb`](https://github.com/cawa-93/dts-for-context-bridge) utility will automatically generate an interface for TS:\n\n```ts\n// packages/preload/exposedInMainWorld.d.ts\ninterface Window {\n  readonly nodeCrypto: { sha256sum(data: import('crypto').BinaryLike): string };\n}\n```\n\nAnd now, you can safely use the registered method:\n\n```ts\n// packages/renderer/src/App.vue\nwindow.nodeCrypto.sha256sum('data');\n```\n\n[Read more about Security Considerations](https://www.electronjs.org/docs/tutorial/context-isolation#security-considerations).\n\n\u003cbr\u003e\n\n## :computer: Installation\n\nAvailable for Windows, macOS, and Linux.\n\nDownload the latest version from the [Releases Page](https://github.com/MrRobz/icon-shelf/releases/latest) or from the :point_right: [Download Page](https://icon-shelf.github.io/download) .\n\nPlease consider starring this project to show your :blue_heart: and support.\n\n\u003cbr\u003e\n\n## :shield: Privacy\n\nThis app has analytics that will track number of users and platform OS only.\n\n\u003cbr\u003e\n\n## Contributing\n\nSee [Contributing Guide.](https://github.com/Icon-Shelf/icon-shelf/blob/main/contributing.md)\n\nPlease adhere to this project's [code of conduct](https://github.com/Icon-Shelf/icon-shelf/blob/main/CODE_OF_CONDUCT.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIcon-Shelf%2Ficon-shelf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FIcon-Shelf%2Ficon-shelf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIcon-Shelf%2Ficon-shelf/lists"}