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

docs: various improvements #157

Merged
merged 2 commits into from
May 7, 2024
+29 −29
Merged

docs: various improvements #157

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a0727a6
docs: various improvements
uncenter May 7, 2024
118ac64
docs: mention ctp/github-file-explorer-icons
uncenter May 7, 2024
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
58 changes: 29 additions & 29 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<h3 align="center">
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
Catppuccin icons
Catppuccin Icons for VSCode/VSCodium
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
</h3>

Expand All @@ -12,121 +12,121 @@
</p>

<p align="center">
<img src="assets/catwalk.webp" width=600/>
<img src="assets/catwalk.webp" width="600"/>
</p>

## Previews

<details>
<summary>🌻 Latte</summary>
<img src="./assets/latte.webp"/>
<img src="assets/latte.webp"/>
</details>
<details>
<summary>🪴 Frappé</summary>
<img src="./assets/frappe.webp"/>
<img src="assets/frappe.webp"/>
</details>
<details>
<summary>🌺 Macchiato</summary>
<img src="./assets/macchiato.webp"/>
<img src="assets/macchiato.webp"/>
</details>
<details>
<summary>🌿 Mocha</summary>
<img src="./assets/mocha.webp"/>
<img src="assets/mocha.webp"/>
</details>

## Features

- Soothing colors from the Catppuccin palette.
- Ever growing collection of language/technology specific icons.
- Look and feel consistency.
- Customization features (coming soon™).
- Custom associations, monochrome icons, and more!

## Usage

**Preferred method of installation**
> [!TIP]
> We also have [a Catppuccin theme for the rest of VSCode/VSCodium](https://github.com/catppuccin/vscode), as well as [a Catppuccin theme that brings these icons right into GitHub](https://github.com/catppuccin/github-file-explorer-icons).

Install the extension from a Marketplace:
### Marketplace

Install the extension from one of the following marketplaces.

- [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Catppuccin.catppuccin-vsc-icons)
- [Open-VSX](https://open-vsx.org/extension/Catppuccin/catppuccin-vsc-icons)

**Manual method for installation**
### Manual

Download the VSIX from
[the latest GitHub release](https://github.com/catppuccin/vscode-icons/releases/latest).
Open the Command Palette and select "Extensions: Install from VSIX...", then open the file you just downloaded.
Open the Command Palette and select "Extensions: Install from VSIX...", then select the file you just downloaded.

## Customization

> [!NOTE]
> We also have a [Catppuccin Theme](https://marketplace.visualstudio.com/items?itemName=Catppuccin.catppuccin-vsc)!

### Settings

We provide some options to further customize your catppuccin experience:
Defaults for each setting are shown below.

```jsonc
{
// set to true to disable folding arrows next to folder icons
// Set to `true` to disable folding arrows next to folder icons.
"catppuccin-icons.hidesExplorerArrows": false,

// set to false to only use default folder icon
// Set to `false` to only use the default folder icon.
"catppuccin-icons.specificFolders": true,

// set this to true to only use `Text` color for all icons
// Set to `true` to only use the `text` fill color for all icons.
"catppuccin-icons.monochrome": false
}
```

To see all available options, open your settings UI and look for `Extensions > Catppuccin Icons`.

> [!IMPORTANT]
> Changing settings regenerates/rewrites theme files and icons. It may take some time on lower spec configs. You may also be prompted to reload the window for changes to take effect.
> Changing settings regenerates/rewrites theme files and icons. It may take some time on lower-end computers. You may also be prompted to reload the window for changes to take effect.

### Custom icon associations

You can also associate specific languagesIds/fileExtensions/fileNames/folderNames to icons and override the provided defaults:
You can also associate specific `languagesIds`/`fileExtensions`/`fileNames`/`folderNames` to icons and override the provided defaults.

```jsonc
{
// custom languageId/icon associations
// Files with the language type `typescriptreact` will have the `typescript-react` icon.
"catppuccin-icons.associations.languages": {
"typescriptreact": "typescript-react"
},

// custom extension/icon associations
// Files with the `spec.ts` extension will have the `typescript-test` icon.
"catppuccin-icons.associations.extensions": {
"spec.ts": "typescript-test"
},

// custom file/icon associations
// Files with the name `vite.config.ts` will have the `vite` icon.
"catppuccin-icons.associations.files": {
"vite.config.ts": "vite"
},

// custom folder/icon associations
// Folders with the name `typings/` will have the `folder_types` icon.
"catppuccin-icons.associations.folders": {
"typings": "folder_types"
}
}
```

> [!NOTE]
> All icons available are listed in the [previews](#previews). Custom/external SVGs are not supported, you may [request icons](#requesting-icons-and-features).
> All available icons are listed in the [preview images above](#previews). Custom/external SVGs are not supported, though you may [request icons](#requesting-icons-and-features).

### Commands

We provide a set of commands to interact with the extension and icons if needed, they are prefixed with `Catppuccin Icons:`:
We provide a set of commands to interact with the extension and icons if needed.

- `Factory reset settings`: removes all customization and resets the theme to its factory defaults.
- `Catppuccin Icons: Factory reset settings`: removes all customization and resets the theme to the defaults.

## Requesting icons and features

To request a new icon or a specific feature, [open an issue](https://github.com/catppuccin/vscode-icons/issues/new/choose) documenting everything needed, the more info the faster your request will be processed.
To request a new icon or a specific feature, [open an issue](https://github.com/catppuccin/vscode-icons/issues/new/choose) documenting everything needed — the more information provided, the faster your request will be processed.

## Contributing

If you are willing to contribute, new icons or features, refer to the [contribution guide](./CONTRIBUTING.md).
If you are willing to contribute new icons or features, refer to the [contribution guide](./CONTRIBUTING.md).

## 💝 Thanks to

Expand Down
Loading