search

jupyterlab / extension-examples

JupyterLab Extensions by Examples
BSD 3-Clause "New" or "Revised" License
454 stars 167 forks source link

Add custom logo in top right corner ? #199

Open oscar6echo opened 2 years ago

oscar6echo commented 2 years ago

This is what I try to achieve - with a sample logo:

Screenshot from 2022-06-30 00-07-27

To do that manually, I open the console and paste:

var svgStr = `
<svg width="512px" height="100px" viewBox="0 0 512 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  preserveAspectRatio="xMidYMid">
    <title>React Query</title>
    <g>
        <g transform="translate(-0.000000, 0.000000)">
            <path d="M68.8475513,62.0956904 L66.707586,65.8116416 C66.062915,66.9310532 64.8694883,67.6209435 63.5777133,67.6209435 L47.1841882,67.6209435 C45.8924133,67.6209435 44.6989865,66.9310532 44.0543155,65.8116416 L41.9141496,62.0956904 L68.8475513,62.0956904 Z M74.8385261,51.6931011 L71.0651972,58.2449084 L39.6965037,58.2449084 L35.9233754,51.6931011 L74.8385261,51.6931011 Z M71.2038502,41.5206639 L74.8445458,47.8425198 L35.9173558,47.8425198 L39.5580513,41.5206639 L71.2038502,41.5206639 Z M63.5777133,31.9042434 C64.8694883,31.9042434 66.062915,32.5941337 66.707586,33.7135453 L68.9862043,37.6698819 L41.7756972,37.6698819 L44.0543155,33.7135453 C44.6989865,32.5941337 45.8924133,31.9042434 47.1841882,31.9042434 L63.5777133,31.9042434 Z" fill="#00435B"></path>
            <path d="M23.3251891,30.1799324 C21.5091845,21.3742057 21.1194646,14.6202884 22.2933124,9.71600336 C22.9914499,6.79921512 24.267814,4.41973998 26.2086244,2.70299006 C28.2576142,0.89054952 30.8481973,0.00118275683 33.7589887,0.00118275683 C38.5609279,0.00118275683 43.6089636,2.19093047 49.0036748,6.35087351 C51.2040769,8.04763681 53.4878124,10.0928179 55.8595654,12.4875644 C56.0483378,12.2445384 56.2617204,12.0153063 56.4994634,11.8034445 C63.2048143,5.82804935 68.8501347,2.11545994 73.6786259,0.683997277 C76.5496454,-0.167149995 79.2451777,-0.248239745 81.6998378,0.577828515 C84.2908916,1.44979737 86.3554391,3.25228356 87.8120339,5.77699134 C90.2159408,9.94367024 90.8498795,15.4187164 89.9536506,22.1789945 C89.588339,24.9345481 88.9638118,27.9361473 88.0814215,31.1884211 C88.4143244,31.2286229 88.7480613,31.3024344 89.0784247,31.4119121 C97.5860361,34.2312137 103.610315,37.2630298 107.257559,40.7278563 C109.427575,42.7893396 110.844623,45.0843928 111.356876,47.6248635 C111.89756,50.3063347 111.370351,52.9959194 109.915452,55.518749 C107.51603,59.6794047 103.104201,62.9608711 96.8189745,65.5600303 C94.2952467,66.6036793 91.439798,67.5488778 88.2494523,68.3989524 C88.3950246,68.7276349 88.5079658,69.076695 88.5834878,69.4428961 C90.3994923,78.248623 90.7892123,85.0025402 89.6153645,89.9068252 C88.917227,92.8236135 87.6408628,95.2030885 85.7000525,96.9198386 C83.6510626,98.7322792 81.0604796,99.6216459 78.1496881,99.6216459 C73.347749,99.6216459 68.2997133,97.4318981 62.9050021,93.2719552 C60.6811802,91.5571324 58.3722415,89.4864356 55.9733508,87.0586802 C55.7265239,87.4447816 55.4234753,87.8036568 55.0650606,88.1230538 C48.3597097,94.0984489 42.7143893,97.8110381 37.8858981,99.2425008 C35.0148786,100.093648 32.3193463,100.174738 29.8646862,99.3486695 C27.2736324,98.4767007 25.2090849,96.6742145 23.7524901,94.1495069 C21.3485832,89.9828279 20.7146445,84.5077817 21.6108734,77.7475037 C21.98939,74.892344 22.6462008,71.7730294 23.5798016,68.3844104 C23.2148771,68.3474348 22.8484589,68.2702633 22.4860993,68.1501825 C13.9784878,65.330881 7.95420905,62.2990649 4.30696543,58.8342384 C2.13694871,56.7727551 0.719900928,54.4777019 0.20764814,51.9372312 C-0.333035566,49.25576 0.194173111,46.5661755 1.64907185,44.0433457 C4.04849374,39.88269 8.46032336,36.6012236 14.7455496,34.0020644 C17.3444752,32.9273184 20.2951845,31.9569773 23.601146,31.0874083 C23.4833571,30.7990613 23.3903464,30.4958765 23.3251891,30.1799324 Z" fill="#002B3B"></path>
            <path d="M82.647994,70.3085524 C83.493895,70.1586404 84.3044969,70.7009514 84.493357,71.5329783 L84.5037449,71.5822522 L84.5938808,72.0504696 C87.5180374,87.4239988 85.4582044,95.1107633 78.414382,95.1107633 C71.5227103,95.1107633 62.7497077,88.5516387 52.0953739,75.4333898 C51.8599688,75.1435447 51.7329708,74.7807016 51.7361201,74.4073182 C51.7438578,73.537527 52.4418631,72.8353735 53.305479,72.8165199 L53.355483,72.816194 L53.9165573,72.8201728 C58.3999495,72.8444789 62.7584785,72.6881569 66.9921444,72.3512067 C71.9897545,71.9534555 77.2083711,71.2725706 82.647994,70.3085524 Z M34.2737825,58.6876892 L34.3007938,58.7332827 L34.5823106,59.224602 C36.8383712,63.1468456 39.1888903,66.8695289 41.6338674,70.3926517 C44.513253,74.541741 47.7512588,78.7420412 51.3478848,82.9935519 C51.9042857,83.651264 51.8407655,84.6275189 51.2130559,85.2081181 L51.1722236,85.2446334 L50.8103444,85.5561095 C38.9104316,95.752412 31.1759493,97.7879335 27.6068979,91.6626734 C24.1133433,85.6669828 25.379952,74.7651472 31.4067238,58.9571666 C31.5391585,58.6097958 31.7880557,58.3191606 32.1109253,58.1348765 C32.8654868,57.7041958 33.8221904,57.9528883 34.2737825,58.6876892 Z M88.6865637,36.0027149 L88.7353265,36.0185841 L89.1832199,36.1732649 C103.871717,41.2828065 109.45226,46.8979906 105.924849,53.018817 C102.47493,59.0051761 92.4455823,63.3637552 75.8368051,66.0945544 C75.4664275,66.1554516 75.0864201,66.084632 74.7628424,65.8944071 C73.9985741,65.4451086 73.7432406,64.4613184 74.192539,63.6970502 C76.5713788,59.6505821 78.7138687,55.6243017 80.6200088,51.6182092 C82.7817968,47.0748275 84.8105257,42.1981517 86.7061953,36.9881824 C86.9936069,36.1982738 87.837891,35.769251 88.6376591,35.9884803 L88.6865637,36.0027149 Z M36.8016816,33.4301242 C37.5659499,33.8794226 37.8212834,34.8632129 37.371985,35.627481 C34.9931452,39.6739492 32.8506553,43.7002296 30.9445152,47.706322 C28.7827272,52.2497038 26.7539984,57.1263796 24.8583287,62.3363489 C24.5650516,63.142378 23.6919405,63.5726411 22.8779603,63.3218164 L22.8291975,63.3059472 L22.3813041,63.1512663 C7.69280661,58.0417247 2.11226372,52.4265407 5.6396753,46.3057143 C9.08959382,40.3193552 19.1189417,35.960776 35.7277189,33.2299769 C36.0980965,33.1690797 36.4781039,33.2398993 36.8016816,33.4301242 Z M83.9576261,8.26382468 C87.4511807,14.2595154 86.184572,25.161351 80.1578002,40.9693315 C80.0253655,41.3167023 79.7764683,41.6073375 79.4535987,41.7916216 C78.6990372,42.2223023 77.7423336,41.9736098 77.2907415,41.238809 L77.2637302,41.1932154 L76.9822134,40.7018962 C74.7261528,36.7796525 72.3756337,33.0569692 69.9306566,29.5338464 C67.051271,25.3847571 63.8132652,21.1844569 60.2166392,16.9329463 C59.6602383,16.2752342 59.7237585,15.2989792 60.3514681,14.71838 L60.3923004,14.6818647 L60.7541796,14.3703886 C72.6540924,4.17408609 80.3885747,2.13856476 83.9576261,8.26382468 Z M33.7521089,4.61507923 C40.6437806,4.61507923 49.4167831,11.1742037 60.0711169,24.2924527 C60.3065221,24.5822978 60.43352,24.9451409 60.4303707,25.3185243 C60.4226331,26.1883155 59.7246277,26.890469 58.8610119,26.9093226 L58.8110079,26.9096485 L58.2499335,26.9056697 C53.7665414,26.8813636 49.4080123,27.0376856 45.1743465,27.3746358 C40.1767364,27.772387 34.9581198,28.4532719 29.5184968,29.4172901 C28.6725958,29.5672021 27.8619939,29.0248911 27.6731339,28.1928642 L27.662746,28.1435903 L27.57261,27.6753729 C24.6484535,12.3018438 26.7082864,4.61507923 33.7521089,4.61507923 Z" fill="#FF4154"></path>
            <g transform="translate(35.114733, 32.104899)" fill="#FFD94C">
                <path d="M13.387301,-6.1007352e-24 L27.1480637,-6.1007352e-24 C29.1605045,-6.1007352e-24 31.0192498,1.0763561 32.0209569,2.82177897 L38.9303941,14.8611161 C39.9243461,16.5930263 39.9243461,18.7223626 38.9303941,20.4542727 L32.0209569,32.4936099 C31.0192498,34.2390328 29.1605045,35.3153889 27.1480637,35.3153889 L13.387301,35.3153889 C11.3748602,35.3153889 9.51611489,34.2390328 8.51440777,32.4936099 L1.60497062,20.4542727 C0.611018509,18.7223626 0.611018509,16.5930263 1.60497062,14.8611161 L8.51440777,2.82177897 C9.51611489,1.0763561 11.3748602,-6.1007352e-24 13.387301,-6.1007352e-24 Z M25.0507921,3.63373777 C27.0642958,3.63373777 28.9238533,4.71122144 29.925165,6.45809639 L34.7432686,14.8636958 C35.7352479,16.5942897 35.7352479,18.7210992 34.7432686,20.4516931 L29.925165,28.8572924 C28.9238533,30.6041675 27.0642958,31.6816511 25.0507921,31.6816511 L15.4845725,31.6816511 C13.4710688,31.6816511 11.6115113,30.6041675 10.6101997,28.8572924 L5.79209597,20.4516931 C4.80011664,18.7210992 4.80011664,16.5942897 5.79209597,14.8636958 L10.6101997,6.45809639 C11.6115113,4.71122144 13.4710688,3.63373777 15.4845725,3.63373777 L25.0507921,3.63373777 Z M22.7902715,7.60813844 L17.7450931,7.60813844 C15.7336562,7.60813844 13.8756784,8.68342993 12.8735988,10.4274812 L12.8735988,10.4274812 L10.3275648,14.8586798 C9.33174741,16.5918322 9.33174741,18.7235566 10.3275648,20.4567091 L10.3275648,20.4567091 L12.8735988,24.8879077 C13.8756784,26.631959 15.7336562,27.7072504 17.7450931,27.7072504 L17.7450931,27.7072504 L22.7902715,27.7072504 C24.8017085,27.7072504 26.6596862,26.631959 27.6617658,24.8879077 L27.6617658,24.8879077 L30.2077998,20.4567091 C31.2036172,18.7235566 31.2036172,16.5918322 30.2077998,14.8586798 L30.2077998,14.8586798 L27.6617658,10.4274812 C26.6596862,8.68342993 24.8017085,7.60813844 22.7902715,7.60813844 L22.7902715,7.60813844 Z M20.6136176,11.4122077 C22.6235478,11.4122077 24.4803736,12.4859025 25.4830101,14.2278955 L25.8439661,14.855025 C26.842586,16.5900394 26.842586,18.7253495 25.8439661,20.4603638 L25.4830101,21.0874933 C24.4803736,22.8294863 22.6235478,23.9031812 20.6136176,23.9031812 L19.921747,23.9031812 C17.9118168,23.9031812 16.0549911,22.8294863 15.0523546,21.0874933 L14.6913986,20.4603638 C13.6927787,18.7253495 13.6927787,16.5900394 14.6913986,14.855025 L15.0523546,14.2278955 C16.0549911,12.4859025 17.9118168,11.4122077 19.921747,11.4122077 L20.6136176,11.4122077 Z M20.2685898,15.1594997 C19.3740185,15.1594997 18.5490262,15.6356095 18.1023672,16.4085971 C17.6557835,17.1814543 17.6557835,18.1339346 18.1023672,18.9067918 C18.5490262,19.6797794 19.3740185,20.1558892 20.2667749,20.1558892 L20.2667749,20.1558892 C21.1613462,20.1558892 21.9863384,19.6797794 22.4329974,18.9067918 C22.8795812,18.1339346 22.8795812,17.1814543 22.4329974,16.4085971 C21.9863384,15.6356095 21.1613462,15.1594997 20.2685898,15.1594997 L20.2685898,15.1594997 Z M8.76499924e-23,17.6576944 L4.49780533,17.6576944"></path>
            </g>
        </g>
        <path d="M143.93158,76.0484795 L143.93158,57.6610006 L153.981416,57.6610006 L163.435707,76.0484795 L176.091057,76.0484795 L166.338993,55.9488062 C169.267094,54.7577144 171.574834,52.6981183 173.262214,49.7700177 C174.949594,46.8419171 175.793284,43.8393734 175.793284,40.7623863 C175.793284,35.7995041 174.39127,31.7547549 171.587241,28.6281391 C168.783213,25.5015232 164.254583,23.9382153 158.001351,23.9382153 L158.001351,23.9382153 L132.616208,23.9382153 L132.616208,76.0484795 L143.93158,76.0484795 Z M158.150237,46.9411748 L143.93158,46.9411748 L143.93158,34.6580411 L158.150237,34.6580411 C160.234648,34.6580411 161.73592,35.2411798 162.654053,36.4074571 C163.572186,37.5737344 164.031253,39.0253774 164.031253,40.7623863 C164.031253,44.8815787 162.070914,46.9411748 158.150237,46.9411748 L158.150237,46.9411748 Z M193.029,76.9417983 C199.083716,76.9417983 204.021783,74.634058 207.843203,70.0185775 L207.843203,70.0185775 L201.589972,63.7653458 C199.356675,66.4453022 196.503017,67.7852805 193.029,67.7852805 C190.89496,67.7852805 189.133137,67.2021417 187.74353,66.0358644 C186.353923,64.8695872 185.609491,63.0953567 185.510233,60.7131732 L185.510233,60.7131732 L209.853171,60.7131732 C210.051685,59.4228237 210.150944,57.5617428 210.150944,55.1299306 C210.150944,49.2737295 208.562821,44.8071355 205.386577,41.7301484 C202.210333,38.6531613 198.09114,37.1146678 193.029,37.1146678 C187.470572,37.1146678 183.066013,38.9013055 179.815326,42.4745807 C176.564638,46.047856 174.939294,50.8866662 174.939294,56.9910115 C174.939294,63.2442432 176.55223,68.1326822 179.778104,71.6563287 C183.003977,75.1799752 187.420943,76.9417983 193.029,76.9417983 Z M199.803334,52.5988606 L185.584676,52.5988606 C185.83282,50.6137078 186.577253,49.062807 187.817973,47.9461585 C189.058694,46.8295099 190.646816,46.2711857 192.58234,46.2711857 C196.850419,46.2711857 199.257417,48.3804107 199.803334,52.5988606 L199.803334,52.5988606 Z M225.525578,76.9417983 C229.545513,76.9417983 232.696944,75.7010778 234.979869,73.2196366 L234.979869,73.2196366 L234.979869,76.0484795 L245.699695,76.0484795 L245.699695,52.0033147 C245.699695,42.0775501 240.314967,37.1146678 229.545513,37.1146678 C223.34191,37.1146678 217.907553,38.7027902 213.242445,41.8790348 L213.242445,41.8790348 L216.59239,50.1422339 C220.612325,47.4622774 224.681888,46.1222992 228.801081,46.1222992 C230.736605,46.1222992 232.250285,46.5813658 233.342118,47.499499 C234.433951,48.4176323 234.979869,49.7452032 234.979869,51.4822121 L234.979869,51.4822121 L234.979869,53.5666227 C232.994717,52.6733038 230.215502,52.2266444 226.642227,52.2266444 C222.523034,52.2266444 218.924946,53.2812569 215.847958,55.3904819 C212.77097,57.499707 211.232477,60.514658 211.232477,64.4353349 C211.232477,68.4552696 212.560049,71.5446638 215.21519,73.7035176 C217.870332,75.8623714 221.307129,76.9417983 225.525578,76.9417983 Z M227.609989,67.8597237 C223.738941,67.8597237 221.803417,66.7430752 221.803417,64.5097781 C221.803417,62.0779659 224.036714,60.8620596 228.503308,60.8620596 C230.835863,60.8620596 232.994717,61.1598326 234.979869,61.7553785 L234.979869,61.7553785 L234.979869,65.1797673 C232.746572,66.9664049 230.289945,67.8597237 227.609989,67.8597237 Z M266.434243,76.9417983 C275.069658,76.9417983 280.6529,72.6489052 283.18397,64.0631187 L283.18397,64.0631187 L272.836361,61.0853894 C271.694897,64.7579223 269.560859,66.5941887 266.434243,66.5941887 C264.44909,66.5941887 262.811339,65.713277 261.520989,63.9514539 C260.230639,62.1896307 259.585465,59.8942976 259.585465,57.0654547 C259.585465,54.2366118 260.243048,51.9288715 261.558211,50.1422339 C262.873374,48.3555962 264.548347,47.4622774 266.583129,47.4622774 C269.51123,47.4622774 271.595641,49.1000286 272.836361,52.3755309 L272.836361,52.3755309 L283.109527,49.0255854 C280.628085,41.0849737 275.069658,37.1146678 266.434243,37.1146678 C261.07433,37.1146678 256.769029,38.9137126 253.518341,42.5118023 C250.267654,46.1098921 248.64231,50.9611095 248.64231,57.0654547 C248.64231,63.2690576 250.255246,68.1326822 253.48112,71.6563287 C256.706994,75.1799752 261.024702,76.9417983 266.434243,76.9417983 Z M298.111946,76.9417983 C301.536335,76.9417983 304.414806,76.3710669 306.747361,75.2296039 L306.747361,75.2296039 L307.938453,66.1475293 C305.754784,67.1401058 303.571117,67.636394 301.387448,67.636394 C300.791902,67.636394 300.283206,67.4502859 299.861362,67.0780697 C299.439518,66.7058536 299.228594,66.1723438 299.228594,65.4775402 L299.228594,65.4775402 L299.228594,47.4622774 L307.491793,47.4622774 L307.491793,38.0079866 L299.228594,38.0079866 L299.228594,22.3004642 L288.508769,27.4370473 L288.508769,38.0079866 L283.297742,38.0079866 L283.297742,47.4622774 L288.508769,47.4622774 L288.508769,66.5197455 C288.508769,73.4677808 291.709828,76.9417983 298.111946,76.9417983 Z M357.149645,82.0783815 L365.487287,76.7184686 L361.467352,70.8374531 C366.380606,65.7256844 368.837232,58.7776491 368.837232,49.9933474 C368.837232,46.6185874 368.40298,43.392714 367.534476,40.3157269 C366.665972,37.2387398 365.363215,34.3726753 363.626206,31.7175333 C361.889197,29.0623914 359.4822,26.9531663 356.405212,25.3898584 C353.328225,23.8265505 349.779764,23.0448965 345.75983,23.0448965 C342.484327,23.0448965 339.519005,23.5659991 336.863863,24.6082044 C334.208722,25.6504097 332.012646,27.052424 330.275637,28.8142472 C328.538627,30.5760703 327.086984,32.6232593 325.920708,34.955814 C324.754431,37.2883688 323.91074,39.7077739 323.389638,42.2140294 C322.868535,44.7202849 322.607984,47.313391 322.607984,49.9933474 C322.607984,52.6733038 322.868535,55.2664099 323.389638,57.7726654 C323.91074,60.2789209 324.754431,62.698326 325.920708,65.0308808 C327.086984,67.3634355 328.538627,69.4106245 330.275637,71.1724476 C332.012646,72.9342708 334.208722,74.3362851 336.863863,75.3784904 C339.519005,76.4206957 342.484327,76.9417983 345.75983,76.9417983 C348.241272,76.9417983 350.648268,76.6192109 352.980823,75.9740363 L352.980823,75.9740363 L357.149645,82.0783815 Z M345.75983,65.9986428 C343.725047,65.9986428 341.93841,65.5147618 340.399917,64.5469998 C338.861424,63.5792377 337.670332,62.2888882 336.826642,60.6759516 C335.982951,59.0630149 335.362592,57.3632276 334.965561,55.57659 C334.568529,53.7899524 334.370015,51.9288715 334.370015,49.9933474 C334.370015,47.4126487 334.692603,44.9684291 335.337777,42.6606888 C335.982951,40.3529485 337.211264,38.3181667 339.022717,36.5563436 C340.83417,34.7945204 343.079873,33.9136087 345.75983,33.9136087 C348.439786,33.9136087 350.673083,34.7697059 352.459721,36.4819003 C354.246358,38.1940947 355.462265,40.2040621 356.107439,42.5118023 C356.752613,44.8195426 357.075201,47.313391 357.075201,49.9933474 C357.075201,54.3606838 356.281141,57.8843303 354.693018,60.5642867 L354.693018,60.5642867 L350.524197,54.311055 L342.112111,59.7454111 L346.355376,65.9241996 L346.355376,65.9241996 L345.983159,65.9241996 L345.75983,65.9986428 Z M385.179629,76.9417983 C389.745482,76.9417983 393.219499,75.4777481 395.601682,72.5496475 L395.601682,72.5496475 L395.601682,76.0484795 L406.395951,76.0484795 L406.395951,38.0079866 L395.601682,38.0079866 L395.601682,57.9587735 C395.601682,60.8868741 395.068173,63.0457279 394.001153,64.4353349 C392.934132,65.8249419 391.259159,66.5197455 388.976234,66.5197455 C386.693309,66.5197455 385.105186,65.8249419 384.211867,64.4353349 C383.318548,63.0457279 382.871889,60.8372452 382.871889,57.809887 L382.871889,57.809887 L382.871889,38.0079866 L372.07762,38.0079866 L372.07762,62.7231405 C372.07762,65.3038392 372.487058,67.5619508 373.305933,69.4974749 C374.124809,71.432999 375.204236,72.9218636 376.544214,73.9640689 C377.884192,75.0062742 379.273799,75.7631137 380.713035,76.2345876 C382.152272,76.7060615 383.641136,76.9417983 385.179629,76.9417983 Z M428.172704,76.9417983 C434.227421,76.9417983 439.165488,74.634058 442.986908,70.0185775 L442.986908,70.0185775 L436.733676,63.7653458 C434.500379,66.4453022 431.646721,67.7852805 428.172704,67.7852805 C426.038665,67.7852805 424.276841,67.2021417 422.887234,66.0358644 C421.497628,64.8695872 420.753196,63.0953567 420.653937,60.7131732 L420.653937,60.7131732 L444.996875,60.7131732 C445.19539,59.4228237 445.294648,57.5617428 445.294648,55.1299306 C445.294648,49.2737295 443.706525,44.8071355 440.530281,41.7301484 C437.354037,38.6531613 433.234844,37.1146678 428.172704,37.1146678 C422.614277,37.1146678 418.209717,38.9013055 414.95903,42.4745807 C411.708343,46.047856 410.082998,50.8866662 410.082998,56.9910115 C410.082998,63.2442432 411.695934,68.1326822 414.921808,71.6563287 C418.147683,75.1799752 422.564646,76.9417983 428.172704,76.9417983 Z M434.947038,52.5988606 L420.728381,52.5988606 C420.976525,50.6137078 421.720958,49.062807 422.961678,47.9461585 C424.202398,46.8295099 425.790521,46.2711857 427.726045,46.2711857 C431.994124,46.2711857 434.401121,48.3804107 434.947038,52.5988606 L434.947038,52.5988606 Z M459.403748,76.0484795 L459.403748,55.4277035 C459.403748,50.1670484 461.587417,47.5367207 465.954753,47.5367207 C468.386564,47.5367207 470.644676,48.405225 472.729087,50.1422339 L472.729087,50.1422339 L474.143508,40.3157269 C472.108726,38.1816876 469.602471,37.1146678 466.624742,37.1146678 C464.887732,37.1146678 463.374054,37.5861417 462.083704,38.5290893 C460.793354,39.4720369 459.900035,40.4397989 459.403748,41.4323754 L459.403748,41.4323754 L459.403748,38.0079866 L448.609479,38.0079866 L448.609479,76.0484795 L459.403748,76.0484795 Z M491.75144,90.490467 L512,38.0079866 L500.907958,38.0079866 L493.240305,58.3309897 C492.694387,59.8198544 492.297358,61.0109461 492.049213,61.9042649 C491.801068,61.0109461 491.404039,59.8198544 490.858121,58.3309897 L490.858121,58.3309897 L483.116025,38.0079866 L471.94954,38.0079866 L486.317084,75.6018201 L480.584955,90.490467 L491.75144,90.490467 Z" fill="#00435B"></path>
    </g>
</svg>
`;

var parser = new DOMParser();
var doc = parser.parseFromString(svgStr, "image/svg+xml");
var svgElt = doc.documentElement;
svgElt.setAttribute("id", "viewer");
svgElt.setAttribute("width", "165px");
svgElt.setAttribute("height", "");

var wrapper = document.createElement("div");
wrapper.setAttribute(
  "style",
  "width: 100%; margin: 2px; display: flex; justify-content: end"
);
wrapper.appendChild(svgElt);

var anchor = document.querySelector("#jp-top-panel");
anchor.appendChild(wrapper);

My questions are:

I would be grateful for any hint/pointer.

bollwyvl commented 2 years ago

Jupyterlab-fonts would do this with "just" an overrides.json, though there might be some flicker.

https://github.com/deathbeds/jupyterlab-fonts

To hook it as early and and correctly as possible, I'd probably do a theme, starting from the cookie cutter:

https://github.com/jupyterlab/extension-cookiecutter-ts

It's likely it could just be a background-image, with the svg inlined by webpack, but would enable much deeper customizing, both of css and various other techniques (e.g some global dockpanel options).

Post-build patching of index.html (e.g. by just adding a style tag) would also work, but would always be fighting upgrades.

fcollonval commented 2 years ago

In JupyterLab v4, right of the main menu bar will be a customizable toolbar. Defining an extension that inject an item in that toolbar will be the recommended way.

oscar6echo commented 2 years ago

@bollwyvl @fcollonval thx again for your fast replies. Much appreciated !

I played around with the cookiecutter and finally found that a frontend extension was a simpler way to do it, compared to a full fledged theme.
For reference: https://github.com/oscar6echo/jupyterlab-add-logo

What is today's rough estimate for Jupyterlab v4 release ? decently stable beta and official release ?

fcollonval commented 2 years ago

What is today's rough estimate for Jupyterlab v4 release ? decently stable beta and official release ?

The goal is to get a target by the end of July. Then once the beta is out, expect the official release ~8 weeks later.

ericsnekbytes commented 1 year ago

There's a PR with an example of something similar here.