jupyterlab_vscode_icons_extension 1.0.38 → 1.0.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +2 -0
  2. package/lib/index.js +23 -12
  3. package/package.json +1 -1
  4. package/src/index.ts +25 -12
package/README.md CHANGED
@@ -79,6 +79,8 @@ This extension shamelessly borrows icons from the excellent [vscode-icons](https
79
79
 
80
80
  All icon assets remain under their original licenses (MIT for code, CC BY-SA for branded icons). We just wrapped them in a JupyterLab extension and called it a day.
81
81
 
82
+ **Custom Icons**: A few icons (Python, Markdown, README) were hand-crafted in Inkscape - because sometimes you need that perfect shade of purple and the exact right amount of snake eyes.
83
+
82
84
  ## Why This Exists
83
85
 
84
86
  Because JupyterLab deserves pretty icons too. That's it. That's the whole justification
package/lib/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ISettingRegistry } from '@jupyterlab/settingregistry';
2
- import { LabIcon, markdownIcon } from '@jupyterlab/ui-components';
2
+ import { LabIcon } from '@jupyterlab/ui-components';
3
3
  import { getIconSVG } from './icons';
4
4
  const PLUGIN_ID = 'jupyterlab_vscode_icons_extension:plugin';
5
5
  /**
@@ -337,22 +337,33 @@ const plugin = {
337
337
  const { docRegistry } = app;
338
338
  // Function to inject CSS that overrides Jupytext icons
339
339
  const injectIconOverrideCSS = () => {
340
- // Get icons: Python (VSCode), Markdown (JupyterLab native), Claude (VSCode), README (custom)
341
- const pythonIcon = createLabIcon('file-type-python');
340
+ // Get icons: Python (custom SVG), Markdown (custom SVG), Claude (VSCode), README (custom)
342
341
  const claudeIcon = createLabIcon('file-type-claude');
343
- const markdownSvg = markdownIcon.svgstr;
344
- // Custom README icon (purple filled circle with bold lowercase i - transparent cutout)
345
- const readmeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
342
+ // Custom Markdown icon (from markdown.svg - purple M with arrow)
343
+ const markdownSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 309 327">
344
+ <path fill="#912bac" opacity="1" stroke="none" d="m 138.68393,230.48651 c 36.58836,3.1e-4 72.68422,3.1e-4 108.78008,3.1e-4 0.13988,0.49669 0.0821,0.12537 -3.34406,3.81472 -27.34165,24.16766 -54.43119,49.41695 -81.72391,73.62893 -2.65146,2.35216 -4.5582,3.21609 -7.64686,0.37229 -26.89754,-24.76539 -75.191307,-68.40096 -80.889724,-74.12425 -0.744118,-0.74735 -1.274501,-1.57204 -2.95867,-3.69233 23.309236,0 45.299954,0 67.783144,3.3e-4 z"/>
345
+ <path fill="#912bac" d="m 61.156397,14.443673 h 69.176263 q 14.81059,56.661581 23.29958,97.452667 l 5.96036,-27.150338 q 3.61233,-15.870486 7.76652,-30.954008 l 10.6564,-39.348321 H 248.6367 L 276.09047,189.5437 H 221.90541 L 207.27544,69.137838 173.50009,189.5437 H 136.47364 L 101.07273,68.875516 86.984609,189.5437 H 35.147571 Z"/>
346
+ </svg>`;
347
+ // Custom Python icon (simplified official logo - 50% reduced fidelity)
348
+ const pythonSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 110">
346
349
  <defs>
347
- <mask id="readme-mask">
348
- <circle cx="16" cy="16" r="12" fill="white"/>
349
- <text x="16" y="22" font-size="20" font-weight="900" text-anchor="middle" fill="black" stroke="black" stroke-width="0.7" font-family="'Courier New', Courier, monospace">i</text>
350
- </mask>
350
+ <linearGradient id="py-b" x1="0%" y1="0%" x2="0%" y2="100%">
351
+ <stop offset="0" stop-color="#387EB8"/>
352
+ <stop offset="100" stop-color="#366994"/>
353
+ </linearGradient>
354
+ <linearGradient id="py-y" x1="0%" y1="100%" x2="0%" y2="0%">
355
+ <stop offset="0" stop-color="#FFE052"/>
356
+ <stop offset="100" stop-color="#FFC331"/>
357
+ </linearGradient>
351
358
  </defs>
352
- <circle cx="16" cy="16" r="12" fill="#9826c8" mask="url(#readme-mask)"/>
359
+ <path fill="url(#py-b)" d="M55,0C29,0,29,10,29,12v13h27v4H19C11,29,0,34,0,55c0,20,8,27,16,27h9V69c0-6,3-16,16-16h26c4,0,15-2,15-14V14C82,11,82,0,55,0zM40,8c3,0,5,2,5,5s-2,5-5,5-5-2-5-5S37,8,40,8z"/>
360
+ <path fill="url(#py-y)" d="M55,110c26,0,26-10,26-12V85H54v-4h37c8,0,18-5,18-26 0-23-11-27-16-27h-9v13c0,6-3,16-16,16H42c-4,0-15,2-15,14v24c0,3,0,14,28,14zM70,101c-3,0-5-2-5-5s2-5,5-5 5,2,5,5S73,101,70,101z"/>
361
+ </svg>`;
362
+ // Custom README icon (info icon from info2.svg - color #aa4fb2)
363
+ const readmeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
364
+ <path fill="#aa4fb2" d="m 9.5247234,12.218859 v 75.35612 a 2.9104166,2.9104166 45 0 0 2.9104166,2.910417 l 76.222217,0 a 2.9104166,2.9104166 135 0 0 2.910417,-2.910417 V 12.218859 A 2.9104166,2.9104166 45 0 0 88.657357,9.3084428 H 12.43514 A 2.9104166,2.9104166 135 0 0 9.5247234,12.218859 Z m 36.2236286,5.918502 h 11.515059 a 2.9104166,2.9104166 45 0 1 2.910417,2.910417 v 3.482474 a 2.9104166,2.9104166 135 0 1 -2.910417,2.910417 H 45.748352 a 2.9104166,2.9104166 45 0 1 -2.910417,-2.910417 v -3.482474 a 2.9104166,2.9104166 135 0 1 2.910417,-2.910417 z M 30.307434,33.442887 h 25.62996 a 2.9104166,2.9104166 45 0 1 2.910417,2.910417 v 34.844385 a 2.9104166,2.9104166 45 0 0 2.910417,2.910417 h 10.661879 a 2.9104166,2.9104166 45 0 1 2.910417,2.910417 v 1.607136 a 2.9104166,2.9104166 135 0 1 -2.910417,2.910417 H 30.307434 a 2.9104166,2.9104166 45 0 1 -2.910417,-2.910417 v -1.607136 a 2.9104166,2.9104166 135 0 1 2.910417,-2.910417 h 10.946618 a 2.9104166,2.9104166 135 0 0 2.910417,-2.910417 V 43.931136 a 2.9104166,2.9104166 45 0 0 -2.910417,-2.910417 l -10.946618,0 a 2.9104166,2.9104166 45 0 1 -2.910417,-2.910417 v -1.756998 a 2.9104166,2.9104166 135 0 1 2.910417,-2.910417 z"/>
353
365
  </svg>`;
354
366
  // Get SVG content
355
- const pythonSvg = pythonIcon.svgstr;
356
367
  const claudeSvg = claudeIcon.svgstr;
357
368
  // Create base64 encoded data URIs
358
369
  const pythonDataUri = `data:image/svg+xml;base64,${btoa(pythonSvg)}`;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jupyterlab_vscode_icons_extension",
3
- "version": "1.0.38",
3
+ "version": "1.0.43",
4
4
  "description": "Jupyterlab extension with a shameless rip-off of the vscode-icons into our beloved environment",
5
5
  "keywords": [
6
6
  "jupyter",
package/src/index.ts CHANGED
@@ -3,7 +3,7 @@ import {
3
3
  JupyterFrontEndPlugin
4
4
  } from '@jupyterlab/application';
5
5
  import { ISettingRegistry } from '@jupyterlab/settingregistry';
6
- import { LabIcon, markdownIcon } from '@jupyterlab/ui-components';
6
+ import { LabIcon } from '@jupyterlab/ui-components';
7
7
  import { getIconSVG } from './icons';
8
8
 
9
9
  const PLUGIN_ID = 'jupyterlab_vscode_icons_extension:plugin';
@@ -378,24 +378,37 @@ const plugin: JupyterFrontEndPlugin<void> = {
378
378
  // Function to inject CSS that overrides Jupytext icons
379
379
  const injectIconOverrideCSS = () => {
380
380
 
381
- // Get icons: Python (VSCode), Markdown (JupyterLab native), Claude (VSCode), README (custom)
382
- const pythonIcon = createLabIcon('file-type-python');
381
+ // Get icons: Python (custom SVG), Markdown (custom SVG), Claude (VSCode), README (custom)
383
382
  const claudeIcon = createLabIcon('file-type-claude');
384
- const markdownSvg = markdownIcon.svgstr;
385
383
 
386
- // Custom README icon (purple filled circle with bold lowercase i - transparent cutout)
387
- const readmeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
384
+ // Custom Markdown icon (from markdown.svg - purple M with arrow)
385
+ const markdownSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 309 327">
386
+ <path fill="#912bac" opacity="1" stroke="none" d="m 138.68393,230.48651 c 36.58836,3.1e-4 72.68422,3.1e-4 108.78008,3.1e-4 0.13988,0.49669 0.0821,0.12537 -3.34406,3.81472 -27.34165,24.16766 -54.43119,49.41695 -81.72391,73.62893 -2.65146,2.35216 -4.5582,3.21609 -7.64686,0.37229 -26.89754,-24.76539 -75.191307,-68.40096 -80.889724,-74.12425 -0.744118,-0.74735 -1.274501,-1.57204 -2.95867,-3.69233 23.309236,0 45.299954,0 67.783144,3.3e-4 z"/>
387
+ <path fill="#912bac" d="m 61.156397,14.443673 h 69.176263 q 14.81059,56.661581 23.29958,97.452667 l 5.96036,-27.150338 q 3.61233,-15.870486 7.76652,-30.954008 l 10.6564,-39.348321 H 248.6367 L 276.09047,189.5437 H 221.90541 L 207.27544,69.137838 173.50009,189.5437 H 136.47364 L 101.07273,68.875516 86.984609,189.5437 H 35.147571 Z"/>
388
+ </svg>`;
389
+
390
+ // Custom Python icon (simplified official logo - 50% reduced fidelity)
391
+ const pythonSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110 110">
388
392
  <defs>
389
- <mask id="readme-mask">
390
- <circle cx="16" cy="16" r="12" fill="white"/>
391
- <text x="16" y="22" font-size="20" font-weight="900" text-anchor="middle" fill="black" stroke="black" stroke-width="0.7" font-family="'Courier New', Courier, monospace">i</text>
392
- </mask>
393
+ <linearGradient id="py-b" x1="0%" y1="0%" x2="0%" y2="100%">
394
+ <stop offset="0" stop-color="#387EB8"/>
395
+ <stop offset="100" stop-color="#366994"/>
396
+ </linearGradient>
397
+ <linearGradient id="py-y" x1="0%" y1="100%" x2="0%" y2="0%">
398
+ <stop offset="0" stop-color="#FFE052"/>
399
+ <stop offset="100" stop-color="#FFC331"/>
400
+ </linearGradient>
393
401
  </defs>
394
- <circle cx="16" cy="16" r="12" fill="#9826c8" mask="url(#readme-mask)"/>
402
+ <path fill="url(#py-b)" d="M55,0C29,0,29,10,29,12v13h27v4H19C11,29,0,34,0,55c0,20,8,27,16,27h9V69c0-6,3-16,16-16h26c4,0,15-2,15-14V14C82,11,82,0,55,0zM40,8c3,0,5,2,5,5s-2,5-5,5-5-2-5-5S37,8,40,8z"/>
403
+ <path fill="url(#py-y)" d="M55,110c26,0,26-10,26-12V85H54v-4h37c8,0,18-5,18-26 0-23-11-27-16-27h-9v13c0,6-3,16-16,16H42c-4,0-15,2-15,14v24c0,3,0,14,28,14zM70,101c-3,0-5-2-5-5s2-5,5-5 5,2,5,5S73,101,70,101z"/>
404
+ </svg>`;
405
+
406
+ // Custom README icon (info icon from info2.svg - color #aa4fb2)
407
+ const readmeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
408
+ <path fill="#aa4fb2" d="m 9.5247234,12.218859 v 75.35612 a 2.9104166,2.9104166 45 0 0 2.9104166,2.910417 l 76.222217,0 a 2.9104166,2.9104166 135 0 0 2.910417,-2.910417 V 12.218859 A 2.9104166,2.9104166 45 0 0 88.657357,9.3084428 H 12.43514 A 2.9104166,2.9104166 135 0 0 9.5247234,12.218859 Z m 36.2236286,5.918502 h 11.515059 a 2.9104166,2.9104166 45 0 1 2.910417,2.910417 v 3.482474 a 2.9104166,2.9104166 135 0 1 -2.910417,2.910417 H 45.748352 a 2.9104166,2.9104166 45 0 1 -2.910417,-2.910417 v -3.482474 a 2.9104166,2.9104166 135 0 1 2.910417,-2.910417 z M 30.307434,33.442887 h 25.62996 a 2.9104166,2.9104166 45 0 1 2.910417,2.910417 v 34.844385 a 2.9104166,2.9104166 45 0 0 2.910417,2.910417 h 10.661879 a 2.9104166,2.9104166 45 0 1 2.910417,2.910417 v 1.607136 a 2.9104166,2.9104166 135 0 1 -2.910417,2.910417 H 30.307434 a 2.9104166,2.9104166 45 0 1 -2.910417,-2.910417 v -1.607136 a 2.9104166,2.9104166 135 0 1 2.910417,-2.910417 h 10.946618 a 2.9104166,2.9104166 135 0 0 2.910417,-2.910417 V 43.931136 a 2.9104166,2.9104166 45 0 0 -2.910417,-2.910417 l -10.946618,0 a 2.9104166,2.9104166 45 0 1 -2.910417,-2.910417 v -1.756998 a 2.9104166,2.9104166 135 0 1 2.910417,-2.910417 z"/>
395
409
  </svg>`;
396
410
 
397
411
  // Get SVG content
398
- const pythonSvg = pythonIcon.svgstr;
399
412
  const claudeSvg = claudeIcon.svgstr;
400
413
 
401
414
  // Create base64 encoded data URIs