Add design tool icons: Figma and Sketch

[kieranblack]

What version of starlight are you using?

0.32.2

What is your idea?

Add design tool icons for Figma and Sketch to link to a Sketch or Figma file/library

Figma Source
Sketch Source (In the main nav)

Here's the icons at 16px width and height with non-zero winding

Figma
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M3.84625 5.51821C3.03578 4.99012 2.5 4.07578 2.5 3.03631C2.5 1.40147 3.8253 0.0761719 5.46014 0.0761719H10.5318C12.1667 0.0761719 13.492 1.40147 13.492 3.03631C13.492 4.07578 12.9562 4.99012 12.1457 5.51821C12.9562 6.04631 13.492 6.96064 13.492 8.00012C13.492 9.63496 12.1667 10.9603 10.5318 10.9603H10.4779C9.70505 10.9603 9.00141 10.6641 8.47424 10.1791V12.9369C8.47424 14.59 7.11994 15.924 5.47356 15.924C3.84208 15.924 2.5 14.602 2.5 12.9639C2.5 11.9244 3.03576 11.0101 3.8462 10.482C3.03576 9.95388 2.5 9.03957 2.5 8.00012C2.5 6.96064 3.03578 6.04631 3.84625 5.51821ZM8.47424 8.00012C8.47424 9.10668 9.37129 10.0037 10.4779 10.0037H10.5318C11.6384 10.0037 12.5354 9.10668 12.5354 8.00012C12.5354 6.89355 11.6384 5.9965 10.5318 5.9965H10.4779C9.37129 5.9965 8.47424 6.89355 8.47424 8.00012ZM7.51772 5.9965H5.46014C4.35357 5.9965 3.45652 6.89355 3.45652 8.00012C3.45652 9.10444 4.34994 10.0001 5.45341 10.0037L5.45654 10.0037L7.51772 10.0037V5.9965ZM5.46014 10.9603C5.4579 10.9603 5.45566 10.9603 5.45341 10.9602C4.34994 10.9639 3.45652 11.8595 3.45652 12.9639C3.45652 14.0671 4.36363 14.9675 5.47356 14.9675C6.59839 14.9675 7.51772 14.055 7.51772 12.9369V10.9603H5.46014ZM7.51772 5.03993V1.03269H5.46014C4.35357 1.03269 3.45652 1.92974 3.45652 3.03631C3.45652 4.14288 4.35357 5.03993 5.46014 5.03993H7.51772ZM10.5318 5.03993C11.6384 5.03993 12.5354 4.14288 12.5354 3.03631C12.5354 1.92974 11.6384 1.03269 10.5318 1.03269H8.47424V5.03993H10.5318Z"/> </svg>

Sketch
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M0.189982 5.99311L3.39598 1.64111C3.42877 1.5967 3.4704 1.55956 3.51824 1.53203C3.56609 1.50449 3.61911 1.48716 3.67398 1.48111L7.95598 1.00511C7.98523 1.00188 8.01474 1.00188 8.04398 1.00511L12.326 1.48061C12.3809 1.48666 12.4339 1.50399 12.4817 1.53153C12.5296 1.55906 12.5712 1.5962 12.604 1.64061L15.8105 5.99311C15.8641 6.06618 15.8914 6.15529 15.8877 6.24586C15.8841 6.33643 15.8498 6.42308 15.7905 6.49161L8.22748 15.2376C8.19932 15.2702 8.16447 15.2964 8.1253 15.3143C8.08613 15.3322 8.04356 15.3415 8.00048 15.3415C7.95741 15.3415 7.91484 15.3322 7.87567 15.3143C7.8365 15.2964 7.80164 15.2702 7.77348 15.2376L0.208982 6.49161C0.149734 6.42302 0.115538 6.33634 0.111995 6.24578C0.108453 6.15521 0.136273 6.06612 0.189982 5.99311ZM9.10298 2.29161C9.08471 2.27317 9.05999 2.26255 9.03403 2.262C9.00807 2.26146 8.98292 2.27103 8.96389 2.28869C8.94487 2.30636 8.93346 2.33073 8.93207 2.35665C8.93069 2.38258 8.93944 2.40802 8.95648 2.42761L10.985 4.92411C11.0088 4.95344 11.0238 4.9889 11.0283 5.0264C11.0327 5.06389 11.0265 5.10189 11.0103 5.13599C10.9941 5.1701 10.9685 5.19891 10.9366 5.21911C10.9047 5.2393 10.8677 5.25005 10.83 5.25011H5.16998C5.13222 5.25005 5.09525 5.2393 5.06334 5.21911C5.03143 5.19891 5.00589 5.1701 4.98968 5.13599C4.97346 5.10189 4.96723 5.06389 4.97171 5.0264C4.97619 4.9889 4.99119 4.95344 5.01498 4.92411L7.04348 2.42761C7.06052 2.40802 7.06927 2.38258 7.06789 2.35665C7.06651 2.33073 7.0551 2.30636 7.03607 2.28869C7.01704 2.27103 6.99189 2.26146 6.96593 2.262C6.93998 2.26255 6.91525 2.27317 6.89698 2.29161L3.87348 5.14761C3.84418 5.17537 3.80717 5.19361 3.76731 5.19995C3.72745 5.20628 3.68661 5.2004 3.65015 5.18309C3.6137 5.16578 3.58333 5.13785 3.56304 5.10296C3.54275 5.06807 3.53349 5.02786 3.53648 4.98761L3.68148 2.96061C3.68352 2.93581 3.67623 2.91115 3.66105 2.89143C3.64587 2.87172 3.62389 2.85837 3.5994 2.854C3.5749 2.84962 3.54966 2.85454 3.52859 2.86778C3.50753 2.88102 3.49216 2.90164 3.48548 2.92561L2.82298 5.24411C2.80054 5.32293 2.75908 5.39502 2.70223 5.45405C2.64538 5.51308 2.5749 5.55723 2.49698 5.58261L1.04298 6.05511C1.02041 6.06253 1.00121 6.07775 0.988838 6.09803C0.976463 6.11832 0.971716 6.14235 0.975446 6.16581C0.979177 6.18928 0.991142 6.21065 1.0092 6.2261C1.02725 6.24155 1.05022 6.25006 1.07398 6.25011H2.47548C2.55967 6.25013 2.64248 6.2714 2.71625 6.31196C2.79002 6.35252 2.85236 6.41104 2.89748 6.48211L6.60448 12.3071C6.62505 12.3394 6.65718 12.3626 6.69429 12.372C6.73141 12.3813 6.7707 12.3762 6.80412 12.3575C6.83754 12.3388 6.86257 12.3081 6.87407 12.2716C6.88557 12.2351 6.88268 12.1956 6.86598 12.1611L4.20898 6.68111C4.18678 6.63537 4.17657 6.58473 4.1793 6.53396C4.18204 6.48318 4.19764 6.43394 4.22464 6.39085C4.25163 6.34776 4.28913 6.31224 4.33362 6.28762C4.37812 6.263 4.42813 6.25009 4.47898 6.25011H11.521C11.5718 6.25009 11.6218 6.263 11.6663 6.28762C11.7108 6.31224 11.7483 6.34776 11.7753 6.39085C11.8023 6.43394 11.8179 6.48318 11.8207 6.53396C11.8234 6.58473 11.8132 6.63537 11.791 6.68111L9.13398 12.1611C9.11791 12.1955 9.11548 12.2347 9.12716 12.2708C9.13884 12.3069 9.16378 12.3372 9.19694 12.3557C9.23011 12.3741 9.26903 12.3793 9.30587 12.3702C9.34272 12.3611 9.37474 12.3384 9.39548 12.3066L13.1025 6.48161C13.1476 6.41071 13.2099 6.35233 13.2836 6.31186C13.3572 6.2714 13.4399 6.25016 13.524 6.25011H14.884C14.9077 6.25006 14.9307 6.24155 14.9488 6.2261C14.9668 6.21065 14.9788 6.18928 14.9825 6.16581C14.9862 6.14235 14.9815 6.11832 14.9691 6.09803C14.9567 6.07775 14.9376 6.06253 14.915 6.05511L13.5 5.58361C13.4229 5.55788 13.3532 5.51375 13.297 5.45502C13.2408 5.3963 13.1998 5.32477 13.1775 5.24661L12.5145 2.92561C12.5078 2.90164 12.4924 2.88102 12.4714 2.86778C12.4503 2.85454 12.4251 2.84962 12.4006 2.854C12.3761 2.85837 12.3541 2.87172 12.3389 2.89143C12.3237 2.91115 12.3164 2.93581 12.3185 2.96061L12.4635 4.98761C12.4665 5.02786 12.4572 5.06807 12.4369 5.10296C12.4166 5.13785 12.3863 5.16578 12.3498 5.18309C12.3134 5.2004 12.2725 5.20628 12.2326 5.19995C12.1928 5.19361 12.1558 5.17537 12.1265 5.14761L9.10298 2.29161Z"/> </svg>

Why is this feature necessary?

We can use the icon component to render these design tool icons

Do you have examples of this feature in other projects?

No response

Participation

• I am willing to submit a pull request for this feature.