Codicons

Install the Codicons icon set into your project using npm. Note that the package vscode-codicons is deprecated; use @vscode/codicons instead.

If you are building a VS Code extension, refer to the webview extension sample for integration guidance.

npm i @vscode/codicons

To add new icons to the Codicons set:

1. Export your icons as SVG files to the src/icons folder.
2. Add a new entry to src/template/mapping.json with a new codepoint key (this is converted into a unicode key).
3. Run the build command: npm run build. Note that the build process removes subfolders in the icons folder to maintain a consistent structure.
4. (For VS Code contributors) Update the codicon.ttf file in the VS Code repository.

Troubleshooting: If icons appear broken after font conversion (common when exporting from Figma), sanitize the SVGs using a tool like svg-reorient.

If you are developing or modifying the Codicons repository, follow these steps to build the project:

1. Install dependencies:

   npm install

2. **Run the build command:**
   ```bash
npm run build

All icons are stored in src/icons. The class name mappings and unicode characters are defined in src/template/mapping.json, and default styles are in src/template/styles.hbs.

To reference an icon using CSS classes, create a DOM element that includes both the codicon class and the specific icon name class (prefixed with codicon-).

Best Practice: Use a single DOM element for each icon and avoid adding child elements to it.

<div class='codicon codicon-add'></div>

To use the codicon.svg sprite file, reference the icon within an <svg> element using the <use> tag and the xlink:href attribute, following the pattern codicon.svg#icon-name.

<svg>
    <use xlink:href="codicon.svg#add" />
</svg>

The Codicons repository uses SVGO (SVG Optimizer) to process icon files. The configuration is designed to ensure icons are compatible with CSS styling by removing hardcoded fill attributes and replacing them with currentColor. This allows the icons to inherit the text color of their parent container.

module.exports = {
    plugins: [
        {
            name: 'removeAttrs',
            params: {
                attrs: 'fill'
            }
        },
        {
            name: 'addAttributesToSVGElement',
            params: {
                attributes: [
                    {
                        fill: 'currentColor'
                    }
                ]
            }
        }
    ]
}