feat: use svg in code to change icons colors on theme switch

Author: ErwanDecoster

src/index.md

@@ -19,35 +19,221 @@ hero:
       link: /get-started/helloWorld
 
 features:
-  - icon: <img src="/icon_quick_start.svg" />
+  - icon:
+      <svg class="_stroke" width="36" height="36" viewBox="0 0 36 36"
+      fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10.81
+      29.1774H8.8733C7.84604 29.1774 6.86085 28.7694 6.13446 28.043C5.40808
+      27.3166 5 26.3314 5 25.3041V7.87428C5 6.84702 5.40808 5.86183 6.13446
+      5.13544C6.86085 4.40906 7.84604 4.00098 8.8733 4.00098H26.3032C27.3304
+      4.00098 28.3156 4.40906 29.042 5.13544C29.7684 5.86183 30.1765 6.84702
+      30.1765 7.87428V9.81093" stroke-width="2" stroke-linecap="round"
+      stroke-linejoin="round"/> <path d="M22.5187 8.82727L10.9795
+      22.6743H21.3648L20.2109 31.9057L31.7501 18.0586H21.3648L22.5187 8.82727Z"
+      stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg>
     title: Quick Start
     details: Jump in and start building on iExec in minutes.
     link: /get-started/helloWorld
-  - icon: <img src="/icon_protect_and_manage data.svg" />
+  - icon:
+      <svg class="_stroke" width="38" height="36" viewBox="0 0 38 36"
+      fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5.16675
+      10.5C5.16675 7.18629 7.85304 4.5 11.1667 4.5H26.1667C29.4805 4.5 32.1667
+      7.18629 32.1667 10.5V25.5C32.1667 28.8137 29.4805 31.5 26.1667
+      31.5H11.1667C7.85304 31.5 5.16675 28.8137 5.16675 25.5V10.5Z"
+      stroke-width="2"/> <path d="M11.6667 12L11.6667 24" stroke-width="2"
+      stroke-linecap="round"/> <path d="M15.6667 16.5L15.6667 24"
+      stroke-width="2" stroke-linecap="round"/> <path d="M19.6667 25C19.6667
+      21.6863 22.353 19 25.6667 19C28.9805 19 31.6667 21.6863 31.6667 25C31.6667
+      28.3137 28.9805 31 25.6667 31C22.353 31 19.6667 28.3137 19.6667 25Z"
+      stroke-width="2"/> <path d="M28.6667 20V16C28.6667 14.3431 27.3236 13
+      25.6667 13C24.0099 13 22.6667 14.3431 22.6667 16V20" stroke-width="2"/>
+      <path d="M25.6667 23.9996V25.9996" stroke-width="2"
+      stroke-linecap="round"/> </svg>
     title: Protect & Manage Data
     details:
       DataProtector encrypts and allows you to control access to your sensitive
       data. Ready-to-use privacy toolkit for developers.
     link: /guides/manage-data/manage-access
-  - icon: <img src="/icon_build_app.svg" />
+  - icon:
+      <svg class="_stroke" width="37" height="36" viewBox="0 0 37 36"
+      fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.8335 9C7.8335
+      6.51472 9.84821 4.5 12.3335 4.5H20.0909C20.8865 4.5 21.6496 4.81607
+      22.2122 5.37868L27.9548 11.1213C28.5174 11.6839 28.8335 12.447 28.8335
+      13.2426V27C28.8335 29.4853 26.8188 31.5 24.3335 31.5H12.3335C9.84822 31.5
+      7.8335 29.4853 7.8335 27V9Z" stroke-width="2"/> <path d="M19.8335
+      4V7C19.8335 10.3137 22.5198 13 25.8335 13H28.8335" stroke-width="2"/>
+      <path d="M16.2282 17.6052L12.8335 21L16.2282 24.3947" stroke-width="1.5"
+      stroke-linecap="round" stroke-linejoin="round"/> <path d="M20.2283
+      24.3947L23.623 21L20.2283 17.6052" stroke-width="1.5"
+      stroke-linecap="round" stroke-linejoin="round"/> </svg>
     title: Build iApp
     details:
       iApp Generator builds confidential applications that run in secure TEEs.
       Custom confidentiality integration without managing infrastructure.
     link: /guides/build-iapp/build-&-test
-  - icon: <img src="/icon_use_iapps.svg" />
+  - icon:
+      <svg width="36" height="36" viewBox="0 0 36 36" fill="none"
+      xmlns="http://www.w3.org/2000/svg"> <path class="_stroke" d="M30.4659
+      27.7988H22.9899L20.4979 30.3488H15.5139L13.0219 27.7988H5.5459"
+      stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path
+      class="_stroke" d="M7.24329 24.6963L5.00049 27.633V32.7477C5.00049 33.1998
+      5.27445 33.6335 5.76211 33.9532C6.24977 34.2729 6.91118 34.4526 7.60084
+      34.4526H28.4037C29.0933 34.4526 29.7547 34.2729 30.2424 33.9532C30.73
+      33.6335 31.004 33.1998 31.004 32.7477V27.633L28.7612 24.6963"
+      stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path
+      class="_fill" d="M30.5286 13.7324C31.0053 13.7324 31.3918 13.3548 31.3918
+      12.8892C31.3918 12.4234 31.0053 12.0459 30.5286
+      12.0459H28.9253V8.914H30.5286C31.0053 8.914 31.3918 8.53644 31.3918
+      8.07078C31.3918 7.60505 31.0053 7.22757 30.5286
+      7.22757H28.9253V5.17976C28.9253 3.65209 27.6528 2.40919 26.0888
+      2.40919H23.9922V0.843216C23.9922 0.37752 23.6056 0 23.1289 0C22.6521 0
+      22.2656 0.37752 22.2656 0.843216V2.40919H19.0591V0.843216C19.0591 0.37752
+      18.6726 0 18.1958 0C17.7191 0 17.3325 0.37752 17.3325
+      0.843216V2.40919H14.126V0.843216C14.126 0.37752 13.7395 0 13.2627 0C12.786
+      0 12.3994 0.37752 12.3994 0.843216V2.40919H10.3028C8.7388 2.40919 7.46631
+      3.65209 7.46631 5.17976V7.22757H5.86305C5.38626 7.22757 4.99976 7.60505
+      4.99976 8.07078C4.99976 8.53644 5.38626 8.914 5.86305
+      8.914H7.46631V12.0459H5.86305C5.38626 12.0459 4.99976 12.4234 4.99976
+      12.8892C4.99976 13.3548 5.38626 13.7324 5.86305
+      13.7324H7.46631V16.8643H5.86305C5.38626 16.8643 4.99976 17.2418 4.99976
+      17.7075C4.99976 18.1732 5.38626 18.5508 5.86305
+      18.5508H7.46631V20.5986C7.46631 22.1262 8.7388 23.3691 10.3028
+      23.3691H12.3994V24.9351C12.3994 25.4008 12.786 25.7783 13.2627
+      25.7783C13.7395 25.7783 14.126 25.4008 14.126
+      24.9351V23.3691H17.3325V24.9351C17.3325 25.4008 17.7191 25.7783 18.1958
+      25.7783C18.6726 25.7783 19.0591 25.4008 19.0591
+      24.9351V23.3691H22.2656V24.9351C22.2656 25.4008 22.6521 25.7783 23.1289
+      25.7783C23.6056 25.7783 23.9922 25.4008 23.9922
+      24.9351V23.3691H26.0888C27.6528 23.3691 28.9253 22.1262 28.9253
+      20.5986V18.5508H30.5286C31.0053 18.5508 31.3918 18.1732 31.3918
+      17.7075C31.3918 17.2418 31.0053 16.8643 30.5286
+      16.8643H28.9253V13.7324H30.5286ZM27.1987 20.5986C27.1987 21.1962 26.7007
+      21.6827 26.0888 21.6827H10.3028C9.69089 21.6827 9.19289 21.1962 9.19289
+      20.5986V5.17976C9.19289 4.58204 9.69089 4.09562 10.3028
+      4.09562H26.0888C26.7007 4.09562 27.1987 4.58204 27.1987 5.17976V20.5986Z"
+      /> <path class="_fill" d="M12.8985
+      18.2815H11.8438V15.342H12.8985V18.2815ZM17.7275 18.2815H16.6315L16.2598
+      17.4543H14.3795L14.0129 18.2815H12.9169L14.8718 14.2022H15.7601L17.7275
+      18.2815ZM19.8576 14.2022C20.3391 14.2022 20.7022 14.3181 20.9469
+      14.5494C21.1918 14.7769 21.3142 15.0873 21.3143 15.4806C21.3143 15.8702
+      21.1918 16.1811 20.9469 16.4126C20.7022 16.6439 20.3391 16.7598 19.8576
+      16.7598H18.9034V18.2815H17.8074V14.2022H19.8576ZM23.7288 14.2022C24.2106
+      14.2022 24.5741 14.318 24.8189 14.5494C25.0638 14.7769 25.1862 15.0873
+      25.1863 15.4806C25.1863 15.8702 25.0638 16.1811 24.8189 16.4126C24.5741
+      16.6439 24.2105 16.7598 23.7288
+      16.7598H22.7754V18.2815H21.6794V14.2022H23.7288ZM14.7336
+      16.6443H15.9212L15.3396 15.3016H15.31L14.7336 16.6443ZM18.9034
+      15.9383H19.7149C19.9006 15.9383 20.0387 15.8992 20.1295 15.8221C20.2203
+      15.7411 20.2663 15.6272 20.2663 15.4806C20.2662 15.3342 20.2202 15.2208
+      20.1295 15.1399C20.0387 15.0588 19.9006 15.0179 19.7149
+      15.0179H18.9034V15.9383ZM22.7754 15.9383H23.5869C23.7726 15.9383 23.9107
+      15.8992 24.0016 15.8221C24.0923 15.7411 24.1383 15.6272 24.1383
+      15.4806C24.1382 15.3343 24.0922 15.2208 24.0016 15.1399C23.9107 15.0588
+      23.7726 15.0179 23.5869 15.0179H22.7754V15.9383ZM12.928
+      14.9255H11.8201V14H12.928V14.9255Z" /> </svg>
     title: Use iApp
     details:
       Execute privacy-preserving apps like Web3Mail and Web3Telegram. Use what
       others built, extend what you need.
     link: /guides/use-iapp/introduction
-  - icon: <img src="/icon_monetize_data.svg" />
+  - icon:
+      <svg class="_fill" width="37" height="36" viewBox="0 0 37 36" fill="none"
+      xmlns="http://www.w3.org/2000/svg"> <path d="M35.2516 10.9932C34.345
+      8.84979 33.0473 6.92483 31.3946 5.27214C29.7419 3.61945 27.817 2.32179
+      25.6735 1.41517C23.4535 0.476276 21.0961 0 18.6667 0C16.2374 0 13.88
+      0.476276 11.66 1.41517C9.51654 2.32179 7.59158 3.61945 5.93889
+      5.27214C4.2862 6.92483 2.98854 8.84979 2.08192 10.9932C1.14302 13.2132
+      0.666748 15.5706 0.666748 18C0.666748 20.4294 1.14302 22.7868 2.08192
+      25.0068C2.98854 27.1502 4.2862 29.0752 5.93889 30.7279C7.59158 32.3806
+      9.51654 33.6782 11.66 34.5848C13.88 35.5237 16.2374 36 18.6667 36C21.0961
+      36 23.4535 35.5237 25.6735 34.5848C27.817 33.6782 29.7419 32.3806 31.3946
+      30.7279C33.0473 29.0752 34.345 27.1502 35.2516 25.0068C36.1905 22.7868
+      36.6667 20.4294 36.6667 18C36.6667 15.5706 36.1905 13.2132 35.2516
+      10.9932ZM29.3463 28.6796C26.4936 31.5323 22.7008 33.1034 18.6667
+      33.1034C14.6327 33.1034 10.8399 31.5323 7.98716 28.6796C5.13447 25.8269
+      3.5633 22.0341 3.5633 18C3.5633 13.9659 5.13447 10.1731 7.98716
+      7.32041C10.8399 4.46772 14.6327 2.89655 18.6667 2.89655C22.7008 2.89655
+      26.4936 4.46772 29.3463 7.32041C32.199 10.1731 33.7702 13.9659 33.7702
+      18C33.7702 22.0341 32.199 25.8269 29.3463 28.6796ZM23.5594 18.4535C24.2455
+      19.147 24.5885 20.0545 24.5885 21.1754C24.5885 22.0312 24.3746 22.7946
+      23.9467 23.4658C23.5189 24.1374 22.9288 24.6757 22.1765 25.0812C21.5426
+      25.423 20.8197 25.6676 20.0079 25.8157V27.0286C20.0079 27.7556 19.4182
+      28.3452 18.6912 28.3452C17.9641 28.3452 17.3745 27.7556 17.3745
+      27.0286V25.9039C16.52 25.8401 15.6974 25.6883 14.9074 25.4466C14.3993
+      25.2914 13.9313 25.1061 13.5026 24.8897C12.8753 24.5731 12.5869 23.8345
+      12.8319 23.1757L12.8716 23.069C13.1505 22.3192 14.0054 21.9637 14.7345
+      22.2927C15.049 22.4342 15.3796 22.56 15.7259 22.6697C16.5891 22.9428
+      17.485 23.0789 18.4143 23.0789C19.4467 23.0789 20.1808 22.9204 20.6161
+      22.603C21.051 22.2861 21.2691 21.8839 21.2691 21.3972C21.2691 20.9988
+      21.1143 20.6748 20.8044 20.4236C20.4945 20.1728 19.9561 19.9663 19.189
+      19.8041L16.755 19.2732C15.3978 18.9633 14.3906 18.451 13.7347
+      17.7352C13.0781 17.0197 12.7499 16.0866 12.7499 14.9359C12.7499 14.0508
+      12.9634 13.2617 13.3917 12.5681C13.8196 11.875 14.4208 11.3181 15.195
+      10.8977C15.8298 10.553 16.5564 10.315 17.3745 10.1839V8.97269C17.3745
+      8.24566 17.9641 7.656 18.6912 7.656C19.4182 7.656 20.0079 8.24566 20.0079
+      8.97269V10.1354C20.684 10.2112 21.344 10.3618 21.9883 10.5881C22.3768
+      10.7247 22.7327 10.8869 23.0567 11.0748C23.6381 11.4124 23.8925 12.1192
+      23.6587 12.7498C23.3782 13.507 22.5121 13.86 21.7793 13.5203C21.5803
+      13.428 21.373 13.3469 21.1582 13.2766C20.4353 13.0407 19.6607 12.9223
+      18.8347 12.9223C17.9347 12.9223 17.2379 13.0994 16.7439 13.4532C16.2494
+      13.8074 16.0027 14.2647 16.0027 14.825C16.0027 15.2234 16.1501 15.5516
+      16.4455 15.8098C16.7405 16.068 17.2565 16.2782 17.9943 16.4404L20.4283
+      16.9713C21.8294 17.2668 22.8734 17.7608 23.5594 18.4539V18.4535Z"/> </svg>
     title: Monetize Data
     details:
       Create revenue streams from your data while maintaining full control and
       privacy
     link: /guides/use-iapp/how-to-pay-executions
-  - icon: <img src="/icon_protocol.svg" />
+  - icon:
+      <svg class="_fill" width="37" height="36" viewBox="0 0 37 36" fill="none"
+      xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd"
+      clip-rule="evenodd" d="M29.5836 3.375H25.0836C23.2226 3.375 21.7086
+      4.88903 21.7086 6.75V7.26487C20.6247 6.92341 19.4954 6.75 18.3336
+      6.75C17.9169 6.75 17.4968 6.77307 17.085 6.8186C16.4675 6.88685 16.0222
+      7.44282 16.0904 8.06038C16.1586 8.67795 16.7153 9.12316 17.3322
+      9.05498C17.6622 9.0185 17.9992 9 18.3336 9C19.5077 9 20.6398 9.22038
+      21.7086 9.65434V11.25C21.7086 13.111 23.2226 14.625 25.0836
+      14.625H29.5836C31.4446 14.625 32.9586 13.111 32.9586 11.25V6.75C32.9586
+      4.88903 31.4446 3.375 29.5836 3.375ZM30.7086 11.25C30.7086 11.8703 30.2039
+      12.375 29.5836 12.375H25.0836C24.4633 12.375 23.9586 11.8703 23.9586
+      11.25V8.94627C23.9587 8.94053 23.9586 8.9348 23.9586 8.92906V6.75C23.9586
+      6.12967 24.4633 5.625 25.0836 5.625H29.5836C30.2039 5.625 30.7086 6.12967
+      30.7086 6.75V11.25Z" /> <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M7.0835 14.625H7.59837C7.2569 15.7089 7.0835 16.8382 7.0835 18C7.0835
+      18.4167 7.10657 18.8368 7.1521 19.2486C7.21573 19.8242 7.70291 20.2501
+      8.26888 20.2501C8.31014 20.2501 8.35193 20.2478 8.39386 20.2432C9.01142
+      20.1749 9.45672 19.6189 9.38847 19.0014C9.352 18.6714 9.3335 18.3344
+      9.3335 18C9.3335 16.8259 9.55387 15.6938 9.98783 14.625H11.5835C13.4445
+      14.625 14.9585 13.111 14.9585 11.25V6.75C14.9585 4.88903 13.4445 3.375
+      11.5835 3.375H7.0835C5.2225 3.375 3.7085 4.88903 3.7085 6.75V11.25C3.7085
+      13.111 5.2225 14.625 7.0835 14.625ZM5.9585 6.75C5.9585 6.12967 6.46316
+      5.625 7.0835 5.625H11.5835C12.2038 5.625 12.7085 6.12967 12.7085
+      6.75V11.25C12.7085 11.8703 12.2038 12.375 11.5835 12.375H9.28075C9.27362
+      12.3749 9.2665 12.375 9.25937 12.375H7.0835C6.46316 12.375 5.9585 11.8703
+      5.9585 11.25V6.75Z" /> <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M29.5835 21.375H29.0686C29.4101 20.291 29.5835 19.1617 29.5835
+      18C29.5835 17.5833 29.5604 17.1632 29.5149 16.7514C29.4466 16.1338 28.8903
+      15.6886 28.2731 15.7568C27.6556 15.825 27.2103 16.381 27.2785
+      16.9985C27.315 17.3286 27.3335 17.6655 27.3335 18C27.3335 19.1741 27.1131
+      20.3062 26.6792 21.375H25.0835C23.2225 21.375 21.7085 22.889 21.7085
+      24.75V29.25C21.7085 31.111 23.2225 32.625 25.0835 32.625H29.5835C31.4445
+      32.625 32.9585 31.111 32.9585 29.25V24.75C32.9585 22.889 31.4445 21.375
+      29.5835 21.375ZM30.7085 29.25C30.7085 29.8703 30.2038 30.375 29.5835
+      30.375H25.0835C24.4632 30.375 23.9585 29.8703 23.9585 29.25V24.75C23.9585
+      24.1296 24.4632 23.625 25.0835 23.625H27.3958C27.3989 23.625 27.4021
+      23.6252 27.4052 23.6252C27.4077 23.6252 27.4103 23.625 27.4128
+      23.625H29.5835C30.2038 23.625 30.7085 24.1296 30.7085 24.75V29.25Z" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M19.3349 26.945C19.0048
+      26.9815 18.6679 27 18.3335 27C17.1594 27 16.0273 26.7796 14.9585
+      26.3457V24.75C14.9585 22.889 13.4445 21.375 11.5835 21.375H7.0835C5.2225
+      21.375 3.7085 22.889 3.7085 24.75V29.25C3.7085 31.111 5.2225 32.625 7.0835
+      32.625H11.5835C13.4445 32.625 14.9585 31.111 14.9585 29.25V28.7351C16.0424
+      29.0766 17.1717 29.25 18.3335 29.25C18.7502 29.25 19.1703 29.2269 19.5821
+      29.1814C20.1996 29.1132 20.6449 28.5572 20.5767 27.9396C20.5084 27.322
+      19.9519 26.8766 19.3349 26.945ZM11.5835 30.375H7.0835C6.46316 30.375
+      5.9585 29.8703 5.9585 29.25V24.75C5.9585 24.1297 6.46316 23.625 7.0835
+      23.625H11.5835C12.2038 23.625 12.7085 24.1297 12.7085
+      24.75V27.0538C12.7084 27.0595 12.7085 27.0652 12.7085
+      27.0709V29.25C12.7085 29.8703 12.2038 30.375 11.5835 30.375Z" /> </svg>
     title: Protocols
     details:
       Deep dive into core protocol concepts. Understand how iExec enables