Code Monkey home page Code Monkey logo

vscode-symbols's Introduction

Symbols

A file icon for VS Code

Preview of extension

Contributing

If you'd like to contribute to this extension, please take a look at the issues or create a new one. If you'd like to create a new icon, please reference the Symbols - File Icon Figma file, you can make a copy or reference the styles used (tailwind). Please try to limit your colors to the ones used in existing icons before choosing a different color style.

When submitting a PR, please ensure you've tested the extension locally and ensure that your new icons appear correctly in the file tree view with your new file extension. Include a screenshot of your proposed icon in your PR.

Configuration

You can configure which folders and files icons are displayed by using the following settings:

Folders

"symbols.folders.associations": {
    "{folder name}": "{icon name}"
}

And here is an example using this setting:

"symbols.folders.associations": {
    "entities": "folder-assets",
    "infra": "folder-app",
    "schemas": "folder-purple"
}

Files

"symbols.files.associations": {
    "{file name}": "{icon name}"
}

And here is an example:

"symbols.files.associations": {
    "app.module.ts": "nest",
    "*.service.ts": "nest"
}

Note: For file names, you can use * to match all files with a specific file extension.

Icon Previews

You can choose which icons to use from the Library:

Name Preview
folder img
folder-app img
folder-android img
folder-assets img
folder-prisma img
folder-mail img
folder-blue img
folder-blue-code img
folder-blue-outline img
folder-config img
folder-gray img
folder-gray-code img
folder-gray-outline img
folder-green img
folder-green-code img
folder-green-outline img
folder-orange img
folder-orange-code img
folder-orange-outline img
folder-purple img
folder-purple-code img
folder-purple-outline img
folder-red img
folder-red-code img
folder-red-outline img
folder-sky img
folder-sky-code img
folder-sky-outline img
folder-yellow img
folder-yellow-code img
folder-yellow-outline img
Name Preview
angular img
astro img
audio img
babel img
biome img
brackets-blue img
brackets-gray img
brackets-green img
brackets-orange img
brackets-purple img
brackets-red img
brackets-sky img
brackets-yellow img
c img
capacitor img
clojure img
code-blue img
code-gray img
code-green img
code-orange img
code-purple img
code-red img
code-sky img
code-yellow img
coffeescript img
coldfusion img
cplus img
crystal img
csharp img
csv img
cypress img
dart img
database img
deno img
docker img
document img
drawio img
dts img
editorconfig img
elixir img
erlang img
eslint img
exe img
firebase img
font img
fsharp img
gear img
git img
github img
go-mod img
go img
gradle img
graphql img
gulp img
h img
haml img
http img
hugo img
ignore img
image img
ionic img
java img
jenkins img
jest img
js-test img
js img
julia-markdown img
julia img
kotlin img
laravel img
license img
liquid img
lua img
markdown img
mdx img
nest img
netlify img
next img
nix img
node img
nodemon img
notebook img
npm img
nunjucks img
patch img
perl img
php img
pnpm img
postcss img
prettier img
prisma img
proto img
pug img
pulumi img
puzzle img
python img
r img
react-test img
react-ts img
react img
rescript-interface img
rescript img
robot img
ruby img
rust img
sass img
sbt img
scala img
shell img
storybook img
stylus img
supabase img
svelte img
svg img
swc img
swift img
tailwind img
terraform img
tex img
text img
ts-test img
ts img
tsconfig img
turborepo img
twig img
v img
vanilla-extract img
vercel img
video img
visual-studio img
vite img
vitest img
vue img
webpack img
xml img
yaml img
yarn img
zig img

vscode-symbols's People

Contributors

andrefelipeschulle avatar barelyhuman avatar bjohansebas avatar castrogarciajs avatar emedeirox avatar evertonandrade avatar fradser avatar franmc01 avatar istratos avatar izcream avatar jacobdalamb avatar joaopalmeiro avatar kylemckell avatar luisorbaiceta avatar luxass avatar marcisbee avatar meluiz avatar meppu avatar miguelsolorio avatar mohouyizme avatar nicolasribeiroo avatar osvaldomdlm avatar pheralb avatar qianxi0410 avatar radovanovic-stevan avatar raminhuk avatar renerpires avatar ricardofreitasdev avatar rvndl avatar wladimirgrf avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

vscode-symbols's Issues

Please consider reducing the spacing of nested folders

Lovely icon set! But I think the nested folder structure takes up too much space.

There are multiple ways to address this, where one of the several material themes has one good example: removing the arrows altogether and changes the folder icon to hint that it's opened:

image

Add support for less icons

I like it, thank you. Btw I just noticed the .less files are not mapped to the css icon or any other icon.

Allow icon theme to run on the web and remote

This icon theme uses javascript to dynamically create the non-chevron tree version via the settings symbols.hidesExplorerArrows. Due to this, it means that the theme can't run on the web (vscode.dev) and additionally when used in remote environments (ssh or codespaces) you have to manually install the theme on each environment as opposed to it running on your main machine.

CleanShot 2022-08-30 at 07 51 32@2x

One possible solution is to remove the javascript and create a pre-publish build task that will generate the copy so there wouldn't be a need for the dynamic javascript. cc @barelyhuman

Scala language support

Hi! I love the icons. Please, consider adding support for Scala language files: .scala, .sc (Scala scripts) and related: .sbt for the build definition files. Example from the Material icons theme:

Screen Shot 2022-08-13 at 19 25 15

Add the possibility to change the color of folders

image

Would be very cool to change the color of the outline folder icons, like Helium does. Asking it because as you see, it is not very beautiful with some background colors. Really like the theme, thanks for making it!

Can't use the icon set on a remote server session

Hi.

I connect VS Code to a Linux server using the Remote-SSH extension. On the remote servers the Symbols plugin is disabled:

image

On the remote servers VS Code is using the Seti icon set, in local it uses the Symbols set correctly. I installed the Material Icons Theme as well, and it doesn't need to be installed on the remote server, just like the default Seti and Minimal sets.

I'm using a Mac with M1 processor and macOS 12.5.1 and VS Code 1.70.2.

Thanks, regards.

Add support for tsx cjs mjs

Looks great! I love the minimal style. Right now the lack of .tsx file support makes it feel out of place, but once that is added I'd love to use it.

Also, consider adding cjs and mjs to use the same icon as JS!

add support for `.node-version`

not sure what a good icon is for that file, but we use .node-version across our projects. Currently it looks kinda sad without a custom icon.

Do we have a date for 0.0.8 release?

Title. I like this package but it's been stuck in v0.0.7 for 5 months. Are there plans to release the features added in the meantime and bump the version?

Add support for prettier

It would be nice to have a prettier icon for files:

  • A .prettierrc file written in JSON or YAML.
  • A .prettierrc.json, .prettierrc.yml, .prettierrc.yaml, or .prettierrc.json5 file.
  • A .prettierrc.js, .prettierrc.cjs, prettier.config.js, or prettier.config.cjs file that exports an object using module.exports.
  • A .prettierrc.toml file.

https://prettier.io/docs/en/configuration.html

feat: business central icon

image

Nice icon theme.

I love it.

Can we have an icon for Business Central (formally Microsoft Dynamic Nav)

image

This extension help in syntax highlighting and the likes, you can pick the icon idea around the logo

.exe file icon

When working with C, I need to compile C programs to a .exe file to run them. An icon for .exe files would be very helpful in differentiating different files.
image

Support file nesting

Love the looks of it! Just wish the alignment of the file nesting would be like in the 'Material Icon Theme' - the misalignment just kinda throws me off. Otherwise I would instantly switch to it✨

image

image

Support Elixir

Heya,
I'm really enjoying the icons and would love to see elixir files supported, especially after seeing how quickly you are hammering out all these other new files.

  • Elixir Files (.ex) and Elixir Script Files (.exs)
  • EEx/HEEx Files (.html.eex/.html.leex/.html.heex)

Thank you so much for the great work!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.