Omni-file is a comprehensive file information extractor that provides language, icon, type, and MIME information for any file based on its name or extension. With over 1000 icons, support for more than 700 programming languages, and only 79.4 kB gzipped, it's both powerful and lightweight!
It leverages GitHub Linguist data and Material Icon Theme for up-to-date and accurate file type detection and icons. The data is regularly updated to ensure the latest language and icon information.
Install omni-file from npm:
npm install omni-file
pnpm add omni-file
yarn add omni-file
getIcon
import { getIcon } from "omni-file";
console.log(getIcon("example.js")); // Output: 'javascript'
console.log(getIcon("styles.css")); // Output: 'css'
console.log(getIcon("data.json")); // Output: 'json'
console.log(getIcon("package.json")); // Output: 'nodejs'
console.log(getIcon("Dockerfile")); // Output: 'docker'
console.log(getIcon(".gitignore")); // Output: 'git'
console.log(getIcon("src", { isFolder: true })); // Output: 'folder-src'
console.log(getIcon("node_modules", { isFolder: true })); // Output: 'folder-node'
console.log(getIcon("tests", { isFolder: true, isExpanded: true })); // Output: 'folder-test-open'
console.log(getIcon("vercel.json", { isLight: true })); // Output: 'vercel_light'
console.log(getIcon("example.test.js")); // Output: 'test-js'
console.log(getIcon("component.spec.ts")); // Output: 'test-ts'
console.log(getIcon(path.join("src", "components", "Button.tsx"))); // Output: 'react_ts'
console.log(getIcon(path.join("tests", "unit", "utils.test.js"))); // Output: 'test-js'
console.log(getIcon(".eslintrc.json")); // Output: 'eslint'
console.log(getIcon(".prettierrc")); // Output: 'prettier'
console.log(getIcon("tsconfig.json")); // Output: 'tsconfig'
console.log(getIcon("README.md")); // Output: 'readme'
console.log(getIcon("readme.md")); // Output: 'readme'
console.log(getIcon("DockerFile")); // Output: 'docker'
console.log(getIcon("dockerfile")); // Output: 'docker'
import { getLanguage } from "omni-file";
console.log(getLanguage("folder/example.ts"));
Output:
{
"type": "programming",
"color": "#3178c6",
"aliases": ["ts"],
"interpreters": ["deno", "ts-node", "tsx"],
"extensions": [".ts", ".cts", ".mts"],
"tm_scope": "source.ts",
"ace_mode": "typescript",
"codemirror_mode": "javascript",
"codemirror_mime_type": "application/typescript",
"language_id": 378,
"name": "TypeScript",
"icons": ["typescript", "javascript"]
}
Note that you can also get icons from
getLanguage
by usinggetLanguage(filename)?.icons
but the answer may be less accurate. (folder icons are not included this way)
getIcon
import { getIcon } from "omni-file";
const icon = getIcon("folder/example.ts"); // "typescript"
const svgUrl = `node_modules/omni-file/icons/${icon}.svg`;
<img src={svgUrl} alt={icon} />;
Output:
import { languages, icons } from "omni-file";
console.log(languages["JavaScript"].extensions); // -> [ ".js",".cjs",".es",".jsm", ... ]
console.log(icons.fileExtensions["js"]); // -> "javascript"
Omni-file provides two icon sets:
You can switch between these themes based on your application's needs:
import { getIcon, IconTheme } from "omni-file";
const darkIcon = getIcon("example.ts", { isLight: false });
const lightIcon = getIcon("example.ts", { isLight: true });
To set up the project for development:
pnpm install
pnpm run update-data
pnpm run build
pnpm test
build
: Builds the project using tsupbuild:watch
: Watches for changes and rebuildstest
: Runs the test suitetest:coverage
: Runs tests with coverage reportingupdate-data
: Updates the Linguist datapostinstall
: Automatically updates data after installationContributions are welcome! Please feel free to submit a Pull Request.
git checkout -b feature/AmazingFeature
)git commit -m 'Add some AmazingFeature'
)git push origin feature/AmazingFeature
)This project is licensed under the MIT License - see the LICENSE file for details.