### Install Material Icon Theme Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/src/module/README.md Install the npm module for Material Icon Theme. ```bash npm install material-icon-theme ``` -------------------------------- ### Install Dependencies with Bun Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md Install project dependencies using the Bun package manager. ```bash bun install ``` -------------------------------- ### Associate Root Folders Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/README.md Assign a specific icon to your workspace's root folder. Use the 'backend' folder name as an example to associate it with the 'server' icon. ```json "material-icon-theme.rootFolders.associations": { "backend": "server" } ``` -------------------------------- ### Get Available Icon Packs Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/src/module/README.md Retrieve a list of all available icon packs using the availableIconPacks constant and log them to the console. ```typescript import { availableIconPacks, type IconPackValue } from 'material-icon-theme'; const iconPacks: Array = availableIconPacks; console.log('Available icon packs:', iconPacks); ``` -------------------------------- ### Flowchart for Adding New Icons Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md This diagram illustrates the decision process for adding new icons, guiding contributors on whether to clone an existing icon or follow the new icon creation workflow. ```mermaid flowchart LR B{Shape already exists
with different colors?} B ---->|No| E B ---->|Yes| C C[Cloning Workflow] E[Creating New Icons Workflow] ``` -------------------------------- ### Check Icon Colors Locally Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md Validates if the colors used in your modified icons conform to the Material Design color palette. Ensure dependencies are installed before running. ```sh bun run check-colors ``` -------------------------------- ### Conventional Pull Request Titles Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md Examples of conventional commit format for pull request titles, used for generating changelogs and understanding project changes. ```git feat: add new icons for Rust ``` ```git fix: correct icon for .gitignore ``` ```git ci: add GitHub Actions for automated testing ``` -------------------------------- ### Run Tests with Bun Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md Execute project tests using the Bun test runner. ```bash bun test ``` -------------------------------- ### Enable and Configure Logging Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md Enable logging and set the log level to debug in VS Code settings. This allows detailed logging for troubleshooting. Remember to restart the extension for changes to take effect. ```json { "material-icon-theme.enableLogging": true, "material-icon-theme.logLevel": "debug", } ``` -------------------------------- ### Define Custom File Icon Clones Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/README.md Clone existing file icons to create new ones with custom names, colors, and associations. Specify 'fileNames' or 'fileExtensions' for association. 'lightColor' can be used for light themes. ```json "material-icon-theme.files.customClones": [ { "name": "rust-mod", "base": "rust", "color": "blue-400", "fileNames": ["mod.rs"] }, { "name": "rust-lib", "base": "rust", "color": "light-green-300", "lightColor": "light-green-600", "fileNames": ["lib.rs"] } ] ``` -------------------------------- ### Combine Folder and Root Folder Icons Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md An icon can be configured for both default folder names and root folder names. Ensure at least one of these attributes is present for every folder icon. ```typescript { name: 'folder-sample', folderNames: ['sample', 'samples'], rootFolderNames: ['sample', 'samples'], } ``` -------------------------------- ### Configure File Icon Associations Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/README.md Define custom file icons using patterns like '*.extension' or '**.[extension]'. Use 'fileName.ts' for specific filenames. The '**' pattern overrides specific file icons. ```json "material-icon-theme.files.associations": { "*.ts": "typescript", "**.json": "json", "fileName.ts": "angular" } ``` -------------------------------- ### Configure Light Theme Icon Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md Use the 'light' attribute to specify an icon variant for light color themes. This requires providing both a default icon (e.g., sample.svg) and a light variant (e.g., sample_light.svg). ```typescript { name: 'sample', fileNames: ['sample.txt'], light: true }, ``` -------------------------------- ### Applying Icons Using File Name Patterns Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md This configuration allows assigning icons to files that match a defined pattern, useful for groups of files with common naming conventions. The pattern is resolved based on the [patterns.ts](https://github.com/material-extensions/vscode-material-icon-theme/blob/main/src/core/patterns/patterns.ts) file. ```typescript { name: 'graphql', patterns: { graphql: FileNamePattern.Ecmascript, }, } ``` -------------------------------- ### Import generateManifest function Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/src/module/README.md Import the generateManifest function from the material-icon-theme module to create an icon manifest. ```javascript import { generateManifest } from 'material-icon-theme'; ``` -------------------------------- ### Generate Icon Manifest with Configuration Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/src/module/README.md Generate an icon manifest using the generateManifest function with custom configuration options. Default values are used for any omitted options. ```typescript import { type ManifestConfig, type IconAssociations, type IconPackValue, generateManifest } from 'material-icon-theme'; const config: ManifestConfig = { activeIconPack: 'angular'; hidesExplorerArrows: true; folders: { theme: 'classic'; associations: {}; }; files: { associations: {}; }; languages: { associations: {}; }; }; const manifest = generateManifest(config); ``` -------------------------------- ### Clone Custom Language Icons Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/README.md Clone existing language icons and modify their colors for new associations. 'base' specifies the icon to clone, 'color' sets the icon's color, and 'ids' associates the new icon with specific language IDs. ```json "material-icon-theme.languages.customClones": [ { "name": "ahk-clone", "base": "autohotkey", "color": "blue-400", "lightColor": "grey-600", "ids": ["ahk2"] } ] ``` -------------------------------- ### Clone Custom Folder Icons Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/README.md Clone existing folder icons and change their colors to create new icons associated with specific folder names. Use 'base' to specify the icon to clone, 'color' for the icon's color, and 'folderNames'/'rootFolderNames' to associate them with specific folders. ```json "material-icon-theme.folders.customClones": [ { "name": "users-admin", "base": "admin", "color": "light-green-500", "lightColor": "light-green-700", "folderNames": ["users"], "rootFolderNames": ["users"] }, { "name": "roles-admin", "base": "admin", "color": "purple-400", "folderNames": ["roles"], "rootFolderNames": ["users"] } ] ``` -------------------------------- ### Configure Folder Icon Associations Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/README.md Customize folder icons by associating specific folder names with predefined icon names. This allows overriding default folder icons for selected directories. ```json "material-icon-theme.folders.associations": { "customFolderName": "src", "sample": "dist" } ``` -------------------------------- ### Configure High Contrast Theme Icon Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md Use the 'highContrast' attribute to specify an icon variant for high contrast backgrounds. This requires providing both a default icon (e.g., sample.svg) and a high contrast variant (e.g., sample_highContrast.svg). ```typescript { name: 'sample', fileNames: ['sample.txt'], highContrast: true }, ``` -------------------------------- ### Associate Custom SVG File Icons Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/README.md Associate custom SVG icons by referencing their path relative to the extension's dist folder. Ensure the SVG is within the `.vscode/extensions` directory. The file ending `.svg` must be omitted in the configuration. ```json "material-icon-theme.files.associations": { "fileName.ts": "../../icons/sample" } ``` -------------------------------- ### Create Icon Packs for File Names Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md Icon packs allow assigning different icons to the same file name based on user selection. Use the 'enabledFor' attribute with an IconPack enum value. ```typescript { name: 'sample-blue', fileNames: ['sample.txt'], enabledFor: [IconPack.Blue], } ``` ```typescript { name: 'sample-red', fileNames: ['sample.txt'], enabledFor: [IconPack.Red], } ``` -------------------------------- ### Clone File Icon with Custom Colors Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md Clone an existing file icon to create a new variant with different colors. Specify 'light: true' if providing a 'lightColor'. ```typescript { name: 'rust-library', fileNames: ['lib.rs'], light: true, // needed if a `lightColor` is provided clone: { base: 'rust', color: 'green-400', lightColor: 'green-700', // optional }, } ``` -------------------------------- ### Customize File and Folder Colors Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/README.md Set custom colors for file and folder icons using VS Code user settings. These settings allow for specific color values to be applied. ```json "material-icon-theme.folders.color": "#ef5350", "material-icon-theme.files.color": "#42a5f5" ``` -------------------------------- ### Assigning Icons to File Names and Extensions Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md Use this configuration to assign a specific icon to files based on their exact names or extensions. This applies to files matching the provided names or ending with the specified extensions. ```typescript { name: 'sample', fileNames: ['sample.js', 'sample.ts', 'sample.html'], fileExtensions: ['sample'], } ``` -------------------------------- ### Assign Folder Icons Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md Use 'folderNames' to assign a specific icon to folders matching the provided names. The tool automatically generates wildcard variants. ```typescript { name: 'folder-sample', folderNames: ['sample', 'samples'], } ``` -------------------------------- ### Associate Custom SVG Folder Icons Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/README.md Reference custom SVG icons for folder icons, providing separate files for closed and open states. Place SVGs within the `.vscode/extensions` directory and reference them relative to the extension's dist folder. ```json "material-icon-theme.folders.associations": { "src": "../../../../icons/folder-sample" } ``` -------------------------------- ### Customize Root Folder Icon Color Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/README.md Change the color of root folder icons by specifying a hex color code. ```json "material-icon-theme.rootFolders.color": "#F4511E" ``` -------------------------------- ### Assign Root Folder Icons Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md Use 'rootFolderNames' to assign an icon to the root folder of a workspace. This can be combined with 'folderNames'. ```typescript { name: 'folder-sample', rootFolderNames: ['sample', 'samples'], } ``` -------------------------------- ### Set Custom Icon Saturation Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/README.md Control the color intensity of icons by setting a custom saturation value in your VS Code user settings. A value of 0 results in grayscale icons. ```json "material-icon-theme.saturation": 0.5 ``` -------------------------------- ### Associate Languages with Icons Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/README.md Customize language icons or overwrite existing associations. 'languageId' is the identifier for the language, and 'iconName' is the name of the icon to use. ```json "material-icon-theme.languages.associations": { "languageId": "iconName", "json": "json" } ``` -------------------------------- ### Sheriff Dependency Rules Configuration Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/src/architecture.md Defines allowed import paths between project modules using sheriff. Ensures that the 'extension' module, which depends on VS Code, does not import from other modules, while other modules can import from 'core'. ```typescript depRules: { root: ['core'], extension: ['core'], module: ['core'], } ``` -------------------------------- ### Folder Icon SVG Structure with Grouped Motive Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md Illustrates how to structure a folder SVG icon when the motive consists of multiple paths or elements, by wrapping them in a group with id='motive'. ```svg ``` -------------------------------- ### Set Folder Theme Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/README.md Change the design of folder icons by specifying a folder theme in your VS Code user settings. This allows for different visual styles for folders. ```json "material-icon-theme.folders.theme": "specific" ``` -------------------------------- ### Assign Language Icons Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md Use 'ids' to associate an icon with specific language identifiers. This applies the icon to files recognized by VS Code for that language. ```typescript { name: 'sample', ids: ['css'] }, ``` -------------------------------- ### Clone Folder Icon with Selective Recolor Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md Clone a folder icon and apply a new color, while respecting 'data-mit-no-recolor' attributes on its SVG elements. ```typescript { name: 'folder-gitlab', folderNames: ['gitlab'] }, ``` ```typescript { name: 'folder-green-gitlab', clone: { base: 'folder-gitlab', color: 'blue-300' }, } ``` -------------------------------- ### Set Custom Icon Opacity Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/README.md Adjust the transparency of icons by setting a custom opacity value in your VS Code user settings. Values range from 0 (fully transparent) to 1 (fully opaque). ```json "material-icon-theme.opacity": 0.5 ``` -------------------------------- ### Folder Icon SVG Structure Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md Defines the required structure for folder SVG icons, including mandatory elements and attributes. Only the closed variant needs to be provided. ```svg ``` -------------------------------- ### Prevent Recolor in Cloned SVG Icons Source: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md Mark specific SVG paths, shapes, or groups with 'data-mit-no-recolor="true"' to prevent them from being recolored when cloning icons. ```svg ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.