{"id":19241693,"url":"https://github.com/exuanbo/file-icons-js","last_synced_at":"2025-04-21T09:32:28.165Z","repository":{"id":37024569,"uuid":"250964042","full_name":"exuanbo/file-icons-js","owner":"exuanbo","description":"File-specific icons extracted from https://github.com/file-icons/atom","archived":false,"fork":false,"pushed_at":"2025-03-11T14:07:12.000Z","size":1936,"stargazers_count":11,"open_issues_count":49,"forks_count":10,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-13T17:11:31.255Z","etag":null,"topics":["css","file-icons","fonts","icon-fonts","icons","javascript","woff2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/exuanbo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-03-29T05:54:21.000Z","updated_at":"2025-01-02T14:46:23.000Z","dependencies_parsed_at":"2024-01-29T00:30:31.806Z","dependency_job_id":"5a191f3f-8b26-40fb-a2a5-39f740845a2a","html_url":"https://github.com/exuanbo/file-icons-js","commit_stats":{"total_commits":373,"total_committers":4,"mean_commits":93.25,"dds":0.5683646112600536,"last_synced_commit":"ea6818e366c53fdd503d2a6b6eb02fc611bbc76b"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exuanbo%2Ffile-icons-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exuanbo%2Ffile-icons-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exuanbo%2Ffile-icons-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exuanbo%2Ffile-icons-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/exuanbo","download_url":"https://codeload.github.com/exuanbo/file-icons-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249934949,"owners_count":21347964,"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":["css","file-icons","fonts","icon-fonts","icons","javascript","woff2"],"created_at":"2024-11-09T17:12:17.803Z","updated_at":"2025-04-21T09:32:27.672Z","avatar_url":"https://github.com/exuanbo.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/exuanbo"],"categories":[],"sub_categories":[],"readme":"# @exuanbo/file-icons-js\n\n\u003e File-specific icons for front-end project, extracted from [file-icons/atom](https://github.com/file-icons/atom)\n\n[![NPM Version](https://img.shields.io/npm/v/@exuanbo/file-icons-js.svg?style=flat-square)](https://www.npmjs.com/package/@exuanbo/file-icons-js)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](https://standardjs.com)\n[![Travis CI](https://img.shields.io/travis/com/exuanbo/file-icons-js/master.svg?style=flat-square)](https://travis-ci.com/github/exuanbo/file-icons-js)\n[![David](https://img.shields.io/david/exuanbo/file-icons-js.svg?style=flat-square)](https://david-dm.org/exuanbo/file-icons-js)\n[![License](https://img.shields.io/github/license/exuanbo/file-icons-js.svg?style=flat-square)](https://github.com/exuanbo/file-icons-js/blob/master/LICENSE)\n\n![Icons preview](https://cdn.jsdelivr.net/gh/file-icons/atom@latest/preview.png)\n\n## Table of Contents\n\n- [Demo](#demo)\n- [Description](#description)\n- [What's included](#whats-included)\n- [Installation](#installation)\n- [Usage](#usage)\n  - [CSS](#css)\n    - [Local](#local)\n    - [With CDN and Web Fonts](#with-cdn-and-web-fonts)\n    - [Customize](#customize)\n  - [JavaScript](#javascript)\n    - [Node.js](#nodejs)\n      - [1. CJS Module](#1-cjs-module)\n      - [2. ES Module](#2-es-module)\n    - [Browser](#browser)\n      - [1. Browserified Module](#1-browserified-module)\n      - [2. ES Module](#2-es-module-1)\n  - [API Reference](#api-reference)\n    - [name](#name)\n    - [options](#options)\n      - [options.color](#optionscolor)\n      - [options.array](#optionsarray)\n    - [Example](#example)\n- [Acknowledgement](#acknowledgement)\n- [TODO](#todo)\n- [License](#license)\n\n## Demo\n\n\u003chttps://exuanbo.github.io/file-icons-js/\u003e\n\nIt's also a starter template for using in browser\n\n## Description\n\n- CSS  with self-hosted fonts and web fonts\n- JavaScript for getting classes by file name with extension, specific directory name and programming language name\n\n## What's included\n\n```shell\ndist\n├── css\n│   ├── file-icons-cdn.css\n│   ├── file-icons-cdn.min.css\n│   ├── file-icons.css\n│   └── file-icons.min.css\n├── fonts\n│   ├── devopicons.woff2\n│   ├── file-icons.woff2\n│   ├── fontawesome.woff2\n│   ├── mfixx.woff2\n│   └── octicons.woff2\n└── js\n    ├── file-icons.esm.js\n    ├── file-icons.esm.min.js\n    ├── file-icons.js\n    └── file-icons.min.js\n\n3 directories, 13 files\n```\n\n## Installation\n\n```shell\nnpm i @exuanbo/file-icons-js\n```\n\nOr download from [Github Releases](https://github.com/exuanbo/file-icons-js/releases)\n\n## Usage\n\nSimilar to [`font-awesome`](https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself),\n\n```html\n\u003ci class=\"icon css3-icon medium-blue\"\u003e\u003c/i\u003e\n```\n\nFull list of available classes can be found in\n\n- [`styles/icons.less`](./styles/icons.less)\n- [`styles/colors.less`](./styles/colors.less)\n\nIcon reference\n\n- [File-Icons](https://github.com/file-icons/icons/blob/master/charmap.md)\n- [FontAwesome 4.7.0](https://fontawesome.com/v4.7.0/cheatsheet/)\n- [Mfizz](https://github.com/file-icons/MFixx/blob/master/charmap.md)\n- [Devicons](https://github.com/file-icons/DevOpicons/blob/master/charmap.md)\n\n### CSS\n\n![css gzip size](https://flat.badgen.net/badgesize/gzip/https://cdn.jsdelivr.net/npm/@exuanbo/file-icons-js@latest/dist/css/file-icons.min.css)\n\n```shell\ndist/css\n├── file-icons-cdn.css\n├── file-icons-cdn.min.css\n├── file-icons.css\n└── file-icons.min.css\n```\n\nAdd a link tag to head, or `@import`\n\n#### Local\n\n`dist/css/file-icons.min.css`\n\n```html\n\u003clink href=\"node_modules/@exuanbo/file-icons-js/dist/css/file-icons.min.css\" rel=\"stylesheet\"\u003e\n```\n\n#### With CDN and Web Fonts\n\n`dist/css/file-icons-cdn.min.css`\n\n```html\n\u003clink href=\"node_modules/@exuanbo/file-icons-js/dist/css/file-icons-cdn.min.css\" rel=\"stylesheet\"\u003e\n```\n\nin which `url` is remote,\n\n```css\n@font-face {\n  font-family: \"file-icons\";\n  font-weight: normal;\n  font-style: normal;\n  src: url(\"https://cdn.jsdelivr.net/npm/@exuanbo/file-icons-js@latest/fonts/file-icons.woff2\") format(\"woff2\");\n}\n```\n\nOr entirely using CDN,\n\n```html\n\u003clink href=\"https://cdn.jsdelivr.net/npm/@exuanbo/file-icons-js@latest/dist/css/file-icons.min.css\" rel=\"stylesheet\"\u003e\n```\n\n#### Customize\n\nBy default,\n\n```css\n.icon:before {\n  font-weight: normal;\n  font-style: normal;\n  text-align: center;\n  width: 16px;\n  line-height: 1;\n  position: relative;\n  display: inline-block;\n  -webkit-font-smoothing: antialiased;\n}\n```\n\n### JavaScript\n\n![js gzip size](https://flat.badgen.net/badgesize/gzip/https://cdn.jsdelivr.net/npm/@exuanbo/file-icons-js@latest/dist/js/file-icons.esm.min.js)\n\n```shell\ndist/js\n├── file-icons.esm.js\n├── file-icons.esm.min.js\n├── file-icons.js\n└── file-icons.min.js\n```\n\n```json\n// package.json\n{\n  \"main\": \"./dist/js/file-icons.js\",\n  \"module\": \"./dist/js/file-icons.esm.js\",\n  \"browser\": \"./dist/js/file-icons.min.js\"\n}\n```\n\n```javascript\n// dist/js/file-icons.esm.js\nvar main = new FileIcons();\nexport default main;\n```\n\n#### Node.js\n\n##### 1. CJS Module\n\n```javascript\nconst icons = require('@exuanbo/file-icons-js')\n```\n\n##### 2. ES Module\n\n```javascript\nimport icons from '@exuanbo/file-icons-js'\n```\n\n#### Browser\n\n##### 1. Browserified Module\n\n`dist/js/file-icons.min.js`\n\n```html\n\u003c!-- Locally --\u003e\n\u003cscript src=\"node_modules/@exuanbo/file-icons-js/dist/js/file-icons.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- With CDN --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@exuanbo/file-icons-js@latest/dist/js/file-icons.min.js\"\u003e\u003c/script\u003e\n```\n\nThen create an instance,\n\n```html\n\u003cscript\u003e\n  const icons = require('file-icons-js')\n\u003c/script\u003e\n```\n\n##### 2. ES Module\n\n`dist/js/file-icons.esm.min.js`\n\n```html\n\u003c!-- Locally --\u003e\n\u003cscript type=\"module\"\u003e\n  import icons from 'node_modules/@exuanbo/file-icons-js/dist/js/file-icons.esm.min.js'\n\u003c/script\u003e\n\n\u003c!-- With CDN --\u003e\n\u003cscript type=\"module\"\u003e\n  import icons from 'https://cdn.jsdelivr.net/npm/@exuanbo/file-icons-js@latest/dist/js/file-icons.esm.min.js'\n\u003c/script\u003e\n```\n\n### API Reference\n\n`getClass(name, options?)`\n\nReturn `Promise\u003cstring|string[]\u003e`\n\n**Note**: this method is Promise based since version 3, and compatible with async/await\n\n#### name\n\nType: `String`\n\nAccept file name with extension as `'index.js'`, specific directory name as `'node_modules'` or `'.github'`, programming language name as `'Javascript'`\n\nString ended with `/` will be considered as directory, e.g `'.emacs.d/'`\n\n#### options\n\nType: `Object`\n\n##### options.color\n\nType: `boolean`  \nDefault: `true`\n\nReturned classes contain color `'icon js-icon medium-yellow'`\n\n##### options.array\n\nType: `boolean`  \nDefault: `false`\n\nReturn an array of string `['icon', 'js-icon', 'medium-yellow']`\n\n#### Example\n\n```javascript\nicons.getClass('package.json')\n// -\u003e Promise {\u003cresolved\u003e: \"icon npm-icon medium-red\"}\n\nicons.getClass('Javascript')\n// -\u003e Promise {\u003cresolved\u003e: \"icon js-icon medium-yellow\"}\n\nicons.getClass('node_modules', {\n  array: true\n})\n// -\u003e Promise {\u003cresolved\u003e: ['icon', 'node-icon', 'medium-green']}\n\nicons.getClass('node_modules', {\n  color: false,\n  array: true\n})\n// -\u003e Promise {\u003cresolved\u003e: ['icon', 'node-icon']}\n```\n\n## Acknowledgement\n\n- [file-icons/atom](https://github.com/file-icons/atom)\n\n## TODO\n\n- [x] CDN support\n- [x] demo site\n- [x] webfont version of css\n- [x] ES module\n\n## License\n\n[MIT](https://github.com/exuanbo/file-icons-js/blob/master/LICENSE)\n\n## Donate\n\n\u003ca href=\"https://www.buymeacoffee.com/exuanbo\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/lato-orange.png\" alt=\"Buy Me A Coffee\" height=\"38.25px\" width=\"162.75px\"\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexuanbo%2Ffile-icons-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexuanbo%2Ffile-icons-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexuanbo%2Ffile-icons-js/lists"}