Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix broken codicons readme links #250

Merged
merged 1 commit into from
May 9, 2024
Merged

Fix broken codicons readme links #250

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

![codicons preview of the icons](https://github.com/raw/microsoft/vscode-codicons/main/preview.png)

This tool takes the [Visual Studio Code icons](https://microsoft.github.io/vscode-codicons/dist/codicon.html) and converts them into an icon font using [fantasticon](https://github.com/tancredi/fantasticon).
This tool takes the [Visual Studio Code icons](https://github.com/microsoft/vscode-codicons/tree/main/src/icons) and converts them into an icon font using [fantasticon](https://github.com/tancredi/fantasticon).

## Install
You can use the [npm package](https://www.npmjs.com/package/@vscode/codicons) and install into your project via:
Expand Down Expand Up @@ -37,8 +37,6 @@ npm install
npm run build
```

Output will be exported to a `dist` folder.

## Update packages

You can run `npm outdated` to see if there are any package updates. To update packages, run:
Expand All @@ -51,14 +49,14 @@ npm update

Export your icons (svg) to the `src/icons` folder and add an entry into `src/template/mapping.json` with a new codepoint key (this gets converted into a unicode key) and run the the build command. The build command will also remove any subfolders in the `icons` folder to keep the folder structure consistent.

Next, update the [codicons file](https://github.com/microsoft/vscode/blob/main/src/vs/base/common/codicons.ts) on the vscode repository, ensuring that the unicode characters are the same (you can reference the [css file](https://microsoft.github.io/vscode-codicons/dist/codicon.css)).
Next, update the [codicons file](https://github.com/microsoft/vscode/blob/main/src/vs/base/browser/ui/codicons/codicon/codicon.ttf) on the vscode repository.


## Using CSS Classes

If you're building a VS Code extension, see this [webview extension sample](https://github.com/microsoft/vscode-extension-samples/tree/main/webview-codicons-sample) on how to integrate.

When needing to reference an icon in the [Visual Studio Code source code](https://github.com/microsoft/vscode) via CSS classes, simply create a dom element/container that contains `codicon` and the [icon name](https://microsoft.github.io/vscode-codicons/dist/codicon.html) like:
When needing to reference an icon in the [Visual Studio Code source code](https://github.com/microsoft/vscode) via CSS classes, simply create a dom element/container that contains `codicon` and the icon name like:

```html
<div class='codicon codicon-add'></div>
Expand Down
Loading