bingyi/vscode-extension-samples
1
0
Fork 0
mirror of https://github.com/microsoft/vscode-extension-samples.git synced 2026-04-27 16:55:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

product icon sample: add script to generate the font from svg files. Fixes #303

Browse Source
This commit is contained in:
Martin Aeschlimann
2020-05-13 17:19:59 +02:00
parent 38cf8ca579
commit 8f289726b8
18 changed files with 1305 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
product-icon-theme-sample/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
node_modules/
out/

15
product-icon-theme-sample/README.md
View File

@ -4,6 +4,8 @@
This sample provides a product icon theme with icons used in VS Code 1.0.
The sample also contains a build script that creates the icon font from svg images.
## Demo
VSCode V1.0 Icons
@ -24,4 +26,15 @@ VSCode V1.0 Icons
## Make changes
- Changes to the product theme file are applied live in the extension development host window. No need to relaunch the extension.
To add or change icons in the icon font:
- add or change the svg icons to the `icons/` folder
- update the `build/updateFont.js` file to add the new icon names to list of icons
- run `npm run updateFont`
- run `npm run showFont` to open `theme/vscode-10.html` in a browser. The page shows the icons in the font.
To change the icon theme:
- modify `theme/v1-product-icon-theme.json` to associate font icons to VS Code icon IDs
- test the theme by running the extension (`F5`)
- changes to the product theme file are applied live in the extension development host window. No need to relaunch the extension.

33
product-icon-theme-sample/build/updateFont.js Normal file
View File

@ -0,0 +1,33 @@
const webfontsGenerator = require('webfonts-generator');
const fs = require('fs');
const svgs = [
"explorer-view.svg",
"search-view.svg",
"debug-view.svg",
"git-view.svg",
"extensions-view.svg",
"smiley.svg",
"folding-expanded.svg",
"folding-collapsed.svg",
"expando-expanded.svg",
"expando-collapsed.svg",
];
webfontsGenerator({
files: svgs.map(i => `./icons/${i}`),
dest: './out/',
types: ['woff'],
fontName: 'vscode-10',
css: false,
html: false,
startCodepoint: 0xE000
}, function(error) {
if (error) {
console.log('Font creation failed.', error);
return;
}
fs.copyFileSync('./out/vscode-10.woff', './theme/vscode-10.woff');
console.log('Font created at ./theme/vscode-10.woff');
})

3
product-icon-theme-sample/icons/debug-view.svg Normal file
View File

@ -0,0 +1,3 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
<path fill="#000" d="M554.667 660.821v181.248c0 19.712 3.84 53.931-15.915 53.931h-69.419v-42.667h42.667v-136.107l-7.381-7.68c-61.995 51.413-150.528 53.248-199.253 4.608-49.365-49.493-44.331-116.821 9.344-202.155h-144.043v42.667h-42.667v-69.419c0-19.755 34.219-15.915 53.931-15.915h175.147l197.589 191.488zM426.667 213.333h-42.667v-42.667h83.413c19.627 0 44.587 9.387 44.587 29.099v142.72l31.403 37.333c7.68-41.515 37.973-72.96 81.664-72.96 6.101 0 14.933 0.597 14.933 1.707v-95.232h42.667v111.701c0 4.992 11.307 16.299 16.299 16.299h111.701v42.667h-95.275c1.152 0 1.792 6.571 1.792 12.715 0 43.733-31.573 74.795-73.045 82.432l37.333 32.853h142.763c19.712 0 29.099 24.875 29.099 44.587v83.413h-42.667v-42.667h-107.52l-276.48-268.885v-115.115zM512 0c-282.752 0-512 229.248-512 512s229.248 512 512 512 512-229.248 512-512-229.248-512-512-512zM938.667 512c0 102.272-36.267 196.267-96.512 269.824l-599.979-599.979c73.557-60.245 167.509-96.512 269.824-96.512 235.264 0 426.667 191.403 426.667 426.667zM85.333 512c0-102.315 36.267-196.267 96.512-269.824l599.979 600.064c-73.557 60.16-167.552 96.427-269.824 96.427-235.264 0-426.667-191.403-426.667-426.667z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
product-icon-theme-sample/icons/expando-collapsed.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#646465" d="M6 4v8l4-4-4-4zm1 2.414l1.586 1.586-1.586 1.586v-3.172z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 151 B

1
product-icon-theme-sample/icons/expando-expanded.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#646465" d="M11 10.07h-5.656l5.656-5.656v5.656z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 131 B

3
product-icon-theme-sample/icons/explorer-view.svg Normal file
View File

@ -0,0 +1,3 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
<path fill="#000" d="M587.91 155.826h-387.562s-89.043 3.473-89.043 89.043v667.827s0 89.043 89.043 89.043l489.739-0.178c89.043 0.178 89.043-88.865 89.043-88.865v-511.599l-191.221-245.27zM512 244.87v222.609h178.087v445.217h-489.739v-667.827h311.652zM757.27-22.261h-378.123s-89.756 0.712-90.424 89.043h356.842v20.213l175.015 202.396h47.594v534.261c89.043 0 89.043-88.821 89.043-88.821v-505.633l-199.947-251.459z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 531 B

12
product-icon-theme-sample/icons/extensions-view.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
<style type="text/css">
.st0{fill:#000;}
</style>
<g id="iconBg">
<path class="st0" d="M12.9,47.1H30V60H0V0h25.7v12.9H12.9V47.1z M17.1,42.9h25.7V17.1H17.1V42.9z M30,0v12.9h8.6V8.6h12.9v12.9
h-4.3V30H60V0H30z M47.1,47.1H34.3V60H60V34.3H47.1V47.1z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 622 B

3
product-icon-theme-sample/icons/folding-collapsed.svg Normal file
View File

@ -0,0 +1,3 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="448" height="512" viewBox="0 0 448 512">
<path d="M333.718 127.995h-219.43c-10 0-18.282 8.282-18.282 18.282v219.43c0 10 8.282 18.282 18.282 18.282h219.43c10 0 18.282-8.283 18.282-18.282v-219.43c0-10-8.283-18.282-18.282-18.282zM333.718 365.718h-219.43v-219.43h219.43v219.43zM205.718 274.282h-54.856v-36.57h54.856v-54.856h36.57v54.856h54.856v36.57h-54.856v54.856h-36.57v-54.856z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 454 B

3
product-icon-theme-sample/icons/folding-expanded.svg Normal file
View File

@ -0,0 +1,3 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="448" height="512" viewBox="0 0 448 512">
<path d="M333.718 127.999h-219.435c-10.001 0-18.282 8.281-18.282 18.282v219.435c0 10 8.281 18.282 18.282 18.282h219.435c10 0 18.282-8.281 18.282-18.282v-219.435c0-10-8.281-18.282-18.282-18.282zM333.718 365.724h-219.435v-219.435h219.435v219.435zM297.142 274.286h-146.287v-36.568h146.287v36.568z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 412 B

3
product-icon-theme-sample/icons/git-view.svg Normal file
View File

@ -0,0 +1,3 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
<path fill="#000" d="M1001.142 465.131l-445.602-445.602c-12.635-12.55-28.685-19.294-46.485-19.294s-33.85 6.702-46.485 19.294l-95.959 95.916 108.807 108.807c10.629-4.781 22.282-7.555 34.704-7.555 47.211 0 85.458 38.247 85.458 85.458 0 12.422-2.732 24.118-7.513 34.747l98.648 99.715c10.672-4.738 27.020-9.989 39.399-9.989 47.211 0 85.372 38.887 85.372 86.055s-38.161 84.049-85.372 84.049c-47.168-0.043-86.055-32.057-86.055-84.732 0-11.952 0.683-19.721 5.080-30.051l-101.294-101.337-0.982 0.299v267.813c31.887 12.592 54.51 43.796 54.51 80.037 0 47.168-37.479 86.055-84.689 86.055-47.126 0-86.696-39.527-86.696-86.696 0-36.113 22.837-66.761 54.638-79.268l0.043-266.789c-32.527-12.038-55.876-43.070-55.876-79.866 0-11.952 2.518-23.307 6.915-33.637l-109.063-109.149-303.713 303.67c-25.569 25.654-25.654 67.274 0.043 92.971l445.644 448.974c12.635 12.592 28.642 19.209 46.485 19.209 17.715 0 33.978-6.787 46.485-19.209l443.553-446.968c25.654-25.569 25.569-67.274 0-92.928z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
product-icon-theme-sample/icons/search-view.svg Normal file
View File

@ -0,0 +1,3 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
<path fill="#000" d="M651.537-2.292c-209.173 0-378.818 169.69-378.818 378.907 0 76.941 23.287 148.175 62.596 208.008 0 0-236.822 235.656-306.806 306.806-70.025 71.105 43.243 175.869 112.406 104.066 69.208-71.668 302.659-302.614 302.659-302.614 59.788 39.354 131.112 62.641 207.963 62.641 209.303 0 378.947-169.774 378.947-378.907 0.045-209.258-169.645-378.907-378.947-378.907zM651.537 647.215c-149.43 0-270.649-121.134-270.649-270.604s121.174-270.649 270.649-270.649c149.559 0 270.689 121.134 270.689 270.649 0 149.47-121.134 270.604-270.689 270.604z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 672 B

1
product-icon-theme-sample/icons/smiley.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#000" d="M8 1c-3.866 0-7 3.134-7 7s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7zm2.45 2.8c.58 0 1.05.627 1.05 1.4 0 .773-.47 1.4-1.05 1.4-.58 0-1.05-.627-1.05-1.4 0-.773.47-1.4 1.05-1.4zm-4.9 0c.58 0 1.05.627 1.05 1.4 0 .773-.47 1.4-1.05 1.4s-1.05-.627-1.05-1.4c0-.773.47-1.4 1.05-1.4zm6.901 5.775c-.668 1.884-2.456 3.15-4.451 3.15-1.995 0-3.784-1.266-4.451-3.149-.097-.273.046-.573.319-.67.275-.097.574.047.67.32.519 1.465 1.91 2.45 3.461 2.45s2.941-.984 3.461-2.45c.097-.273.4-.417.67-.32.274.096.418.396.321.669z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 590 B

1141
product-icon-theme-sample/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
product-icon-theme-sample/package.json
View File

@ -14,5 +14,13 @@
"path": "./theme/v1-product-icon-theme.json"
}
]
},
"scripts": {
"updateFont": "node ./build/updateFont.js",
"showFont": "open ./theme/vscode-10.html"
},
"devDependencies": {
"open": "^7.0.3",
"webfonts-generator": "^0.4.0"
}
}

21
product-icon-theme-sample/theme/v1-product-icon-theme.json
View File

@ -14,34 +14,31 @@
],
"iconDefinitions": {
"files": {
"fontCharacter": "\\e901"
"fontCharacter": "\\e000"
},
"search": {
"fontCharacter": "\\e903"
"fontCharacter": "\\e001"
},
"debug-alt-2": {
"fontCharacter": "\\e900"
"fontCharacter": "\\e002"
},
"source-control": {
"fontCharacter": "\\e902"
},
"gear": {
"fontCharacter": "\\e947"
"fontCharacter": "\\e003"
},
"tree-item-expanded": {
"fontCharacter": "\\e91a"
"fontCharacter": "\\e008"
},
"folding-expanded": {
"fontCharacter": "\\f06c"
"fontCharacter": "\\e006"
},
"folding-collapsed": {
"fontCharacter": "\\f06b"
"fontCharacter": "\\e007"
},
"feedback": {
"fontCharacter": "\\e917"
"fontCharacter": "\\e005"
},
"extensions": {
"fontCharacter": "\\e918"
"fontCharacter": "\\e004"
}
}
}

66
product-icon-theme-sample/theme/vscode-10.html Normal file
View File

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vscode-10 preview</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 10px 20px;
}
.preview {
line-height: 2em;
}
.preview_icon {
display: inline-block;
width: 32px;
text-align: center;
}
.icon {
display: inline-block;
font-size: 16px;
line-height: 1;
}
@font-face {
font-family: "vscode-10";
src: url("vscode-10.woff?7e4c98247e0da9c800233af089778d2a") format("woff");
}
.icon:before {
font-family: vscode-10 !important;
font-style: normal;
font-weight: normal !important;
vertical-align: top;
}
</style>
<script>
window.addEventListener("load", function () {
let htmContent = [];
let cssContent = [];
for (let i = 0; i < 40; i++) {
let hexString = (0xe000 + i).toString(16);
cssContent.push('.icon-' + hexString + ':before { content: "\\' + hexString + '"; }');
htmContent.push('<div class="preview"><span class="preview_icon"><span class="icon icon-' + hexString + '"></span></span><span>' + hexString + '</span></div>');
}
let style = document.createElement('style');
style.type = 'text/css';
style.media = 'screen';
style.innerHTML = cssContent.join('\n');
document.head.appendChild(style);
document.body.innerHTML += htmContent.join('\n');
});
</script>
</head>
<body>
vscode-10
</body>
</html>

BIN
product-icon-theme-sample/theme/vscode-10.woff
View File

Binary file not shown.