Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matejchalk/vscode-material-icons
VSCode Material Icon Theme wrapper for applications
https://github.com/matejchalk/vscode-material-icons
Last synced: 3 months ago
JSON representation
VSCode Material Icon Theme wrapper for applications
- Host: GitHub
- URL: https://github.com/matejchalk/vscode-material-icons
- Owner: matejchalk
- License: mit
- Created: 2024-02-10T08:32:09.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-09-30T13:15:21.000Z (3 months ago)
- Last Synced: 2024-10-10T11:34:35.984Z (3 months ago)
- Language: TypeScript
- Homepage: https://vscode-material-icons.vercel.app
- Size: 1.42 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vscode-material-icons
**[VSCode Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.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](https://vscode-material-icons.vercel.app/).
## Setup
Install `vscode-material-icons` with your package manager:
NPM
```sh
npm install vscode-material-icons
```
Yarn
```sh
yarn add vscode-material-icons
```
PNPM
```sh
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.
Webpack example
Use [copy-webpack-plugin](https://webpack.js.org/plugins/copy-webpack-plugin/) in `webpack.config.js`:
```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',
},
],
}),
],
};
```
Angular example
Append to `assets` in `angular.json` (or `project.json` if using Nx):
```jsonc
{
// ..
"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:
```ts
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:
```ts
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 package`.
- Re-fetch icons from VSCode extension with `npm run fetch-icons` (requires Bun).
- Release new version with `npm run release`.