MIME icons

Give an icon to a web resource file by Content-Type or url subfix.

Usage

npm install mime-icons

First, MUST copy icons folder to your project's public files path.

Now, import module, with getIconName function, you will get the target icon name. The function get 2 optional parameters:

parameter	from
contentType	HTTP response header's Content-Type
url	resource url

example:

import mime from "mime-icons";

const icon = mime.getIconName({
  contentType: "text/html",
  url: "http://xxx.com/index.html",
});

const imagePath = env.PUBLIC_PATH + "/icons/" + icon;

Example

git clone https://github.com/DeronW/mime-icons
cd mime-icons/demo
npm i
npm run dev
# open http://localhost:5173

Resources

Thanks to apache for content-type and file extensions mapping, and vscode-icons for extensions icons.

customize

Some files has common extension, use common use case overwrite it, such as js, css, html and soon.