Skip to content

Commit

Permalink
Merge pull request #1 from D4N/main
Browse files Browse the repository at this point in the history
Initial prototype of the eos icons extension for VSCode
  • Loading branch information
cyntss authored Mar 9, 2021
2 parents 710313f + d92842b commit 169b560
Show file tree
Hide file tree
Showing 8 changed files with 610 additions and 1 deletion.
5 changes: 5 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
node_modules
vscode-eos-icons-*.vsix
.log
theme
.env3
13 changes: 13 additions & 0 deletions .vscode/launch.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Extension",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": ["--extensionDevelopmentPath=${workspaceRoot}"],
"stopOnEntry": false
}
]
}
3 changes: 3 additions & 0 deletions .vscodeignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**/*
!theme/eos-icons.woff
!theme/eos-icons-product-icon-theme.json
36 changes: 35 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,35 @@
# eos-icons-vsc
# EOS Icons for VSCode

This extension allows you to replace VSCode's default icons with those from the
[EOS icon set](https://eos-icons.com/).


## Usage

Install the extension from the Marketplace, execute the command `Preferences:
Product Icon Theme` and select the entry `EOS Icons` in the presented drop down:

![select_product_theme.png](select_product_theme.png)


## Development

To build the extension yourself, you will need the following packages installed:

- nodejs
- yarn
- python

and execute the following commands to setup your development environment:
```ShellSession
$ yarn install
$ yarn run prepare
```

To build the extension itself, execute `yarn run package`.

To try the extension out in VSCode, open this folder in VSCode and press `<f5>`
to launch a debugging session. This will create a fresh VSCode instance with the
extension pre-installed and loaded. Note that sometimes the icon theme is not
properly loaded on launch, in that case switch the Product Icon Theme to the
default and back to EOS Icons.
61 changes: 61 additions & 0 deletions create_icon_theme.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
#!/usr/bin/python3

import shutil
import json
from os.path import dirname, join

from fontTools.ttLib import TTFont

dest = join(dirname(__file__), "./theme/eos-icons.woff")
shutil.copyfile(
join(
dirname(__file__), "./node_modules/eos-icons/dist/fonts/eos-icons.woff"
),
dest,
)

code_points = {}

with TTFont(dest, 0, ignoreDecompileErrors=True) as ttf:
for x in ttf["cmap"].tables:
for (code, name) in x.cmap.items():
code_points[name] = code


icon_to_glyph_mapping = [
["accounts-view-bar-icon", "account_circle"],
["callhierarchy-incoming", "call_received"],
["callhierarchy-outgoing", "call_made"],
["callstack-view-session", "bug_report"],
["comments-view-icon", "comment"],
["debug-configure", "settings_applications"],
["extensions-manage", "settings_applications"],
["settings-view-bar-icon", "settings_applications"],
]

eos_icons_theme = {
"fonts": [
{
"id": "eos-icons",
"src": [
{
"path": "./eos-icons.woff",
"format": "woff",
},
],
"weight": "normal",
"style": "normal",
},
],
"iconDefinitions": {},
}

for (icon_name, glyph_name) in icon_to_glyph_mapping:
eos_icons_theme["iconDefinitions"][icon_name] = {
"fontCharacter": chr(code_points[glyph_name]),
}

with open(
join(dirname(__file__), "theme/eos-icons-product-icon-theme.json"), "w"
) as product_icon_file:
product_icon_file.write(json.dumps(eos_icons_theme, indent=2))
39 changes: 39 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
{
"name": "eos-icons-vscode",
"version": "0.0.1",
"publisher": "EOS-uiux-Solutions",
"license": "MIT",
"description": "The iconic and open source font made for EOS Design System for VSCode.",
"keywords": ["iconic", "font", "eos", "icons", "product-icon"],
"author": "SUSE UX/UI team",
"engines": {
"vscode": ">=1.53.0"
},
"scripts": {
"cleandeps": "rm -rf node_modules .env3",
"package": "vsce package --yarn",
"prepare": "python3 -m venv .env3 && . .env3/bin/activate && pip install fonttools",
"vscode:prepublish": ". .env3/bin/activate && ./create_icon_theme.py"
},
"contributes": {
"productIconThemes": [
{
"id": "eos-icons",
"label": "EOS Icons",
"path": "./theme/eos-icons-product-icon-theme.json"
}
]
},
"devDependencies": {
"eos-icons": "^4.12.0",
"vsce": ">=1.85"
},
"homepage": "https://eos-icons.com/",
"bugs": {
"url": "https://github.com/EOS-uiux-Solutions/eos-icons-vscode/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/EOS-uiux-Solutions/eos-icons-vscode.git"
}
}
Binary file added select_product_theme.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 169b560

Please sign in to comment.