vscode-material-icons
v0.1.1
Published
VSCode Material Icons wrapper for applications
Downloads
22,884
Maintainers
Readme
vscode-material-icons
VSCode Material Icon Theme wrapper for applications to self-host icons and select icon based on file path.
For a full list of available icons, see showcase.
Setup
Install vscode-material-icons
with your package manager:
npm install vscode-material-icons
yarn add vscode-material-icons
pnpm add vscode-material-icons
Self-hosting icons
If you want to self-host the icons in your front-end app, configure your bundler to copy the node_modules/vscode-material-icons/generated/icons
folder to your build output.
Use copy-webpack-plugin in webpack.config.js
:
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
// ...
plugins: [
// ...
new CopyPlugin({
patterns: [
{
from: 'node_modules/vscode-material-icons/generated/icons',
to: 'assets/material-icons',
},
],
}),
],
};
Append to assets
in angular.json
(or project.json
if using Nx):
{
// ..
"targets": {
"build": {
"executor": "@angular-devkit/build-angular:browser",
"options": {
// ...
"assets": [
// ...
{
"glob": "**/*",
"input": "./node_modules/vscode-material-icons/generated/icons",
"output": "/assets/material-icons/"
}
]
}
// ...
}
}
}
Usage
Use exported functions to get an icon name/URL from a file/folder path:
import {
getIconForFilePath,
getIconUrlByName,
getIconUrlForFilePath,
type MaterialIcon,
} from 'vscode-material-icons';
// should match output path configured in bundler
const ICONS_URL = '/assets/material-icons';
// example 1: file path -> image URL
const iconUrl: string = getIconUrlForFilePath('src/index.html', ICONS_URL);
// example 2: file path -> icon name
const icon: MaterialIcon = getIconForFilePath('src/app/app.component.ts');
// example 3: icon name -> image URL
const tsIconUrl: string = getIconUrlByName('typescript', ICONS_URL);
It's also simple to validate icon names in a type-safe way:
import {
isMaterialIcon,
MATERIAL_ICONS,
type MaterialIcon,
} from 'vscode-material-icons';
// example 1: use union type for autocomplete
let icon: MaterialIcon;
// example 2: validate icon name with type predicate function
if (isMaterialIcon(value)) {
icon = value;
}
// example 3: integrate with schema validation library, e.g. Zod
const materialIconSchema = z.enum(MATERIAL_ICONS);
icon = materialIconSchema.parse(value);
Contributing
- Install dependencies with
npm install
. - Run unit tests with
npm test
. - Build library with
npm run build
. - Re-fetch icons from VSCode extension with
npm run fetch-icons
. - Release new version with
npm run release
.