mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-10-26 00:19:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4
zed/assets/icons/file_icons/elm.svg

10 lines
1.6 KiB
XML
Raw Normal View History

Update to UI and Framework Icons (#9468) This is an update to 82 Zed UI and file_icons to improve icon legibility and align contributed file_icons to the general icon system styling. From review it appears they're 2px larger in width and height but gpui render scaling is at play. The original icons were designed at 14x14 to be viewed at that size, but the ui_font_size now controls this so they've been updated to the default of 16x16 for optimum fidelity. ![CleanShot 2024-03-17 at 16 20 13@2x](https://github.com/zed-industries/zed/assets/1648941/4151c631-78e6-43a8-914f-37b00f43e130) Release Notes: - Updated various UI and file icons for consistency.
2024-03-18 14:59:19 +00:00
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.1464 9.85355L12.3536 10.6464C12.1583 10.8417 12.1583 11.1583 12.3536 11.3536L13.1464 12.1464C13.4614 12.4614 14 12.2383 14 11.7929V10.2071C14 9.76165 13.4614 9.53857 13.1464 9.85355Z" fill="black"/>
<path d="M12.6464 8.35355L11.3536 9.64645C11.1583 9.84171 10.8417 9.84171 10.6464 9.64645L9.35355 8.35355C9.15829 8.15829 9.15829 7.84171 9.35355 7.64645L10.6464 6.35355C10.8417 6.15829 11.1583 6.15829 11.3536 6.35355L12.6464 7.64645C12.8417 7.84171 12.8417 8.15829 12.6464 8.35355Z" fill="black"/>
<path d="M14 2.5V5.79289C14 6.23835 13.4614 6.46143 13.1464 6.14645L9.85355 2.85355C9.53857 2.53857 9.76165 2 10.2071 2H13.5C13.7761 2 14 2.22386 14 2.5Z" fill="black"/>
<path d="M8.14645 3.14645L7.14645 2.14645C7.05268 2.05268 6.9255 2 6.79289 2H4.20711C3.76165 2 3.53857 2.53857 3.85355 2.85355L4.85355 3.85355C4.94732 3.94732 5.0745 4 5.20711 4H7.79289C8.23835 4 8.46143 3.46143 8.14645 3.14645Z" fill="black"/>
<path d="M7.20711 5H8.79289C9.23835 5 9.46143 5.53857 9.14645 5.85355L8.35355 6.64645C8.15829 6.84171 7.84171 6.84171 7.64645 6.64645L6.85355 5.85355C6.53857 5.53857 6.76165 5 7.20711 5Z" fill="black"/>
<path d="M12.1464 13.1464L8.35355 9.35355C8.15829 9.15829 7.84171 9.15829 7.64645 9.35355L3.85355 13.1464C3.53857 13.4614 3.76165 14 4.20711 14H11.7929C12.2383 14 12.4614 13.4614 12.1464 13.1464Z" fill="black"/>
<path d="M6.64645 8.35355L2.85355 12.1464C2.53857 12.4614 2 12.2383 2 11.7929V4.20711C2 3.76165 2.53857 3.53857 2.85355 3.85355L6.64645 7.64645C6.84171 7.84171 6.84171 8.15829 6.64645 8.35355Z" fill="black"/>
Add Elm file icon (#7440) Tried to match the existing file icons in Zed as much as possible. This is how it looks: | dark | light | |---|----| | <img width="183" alt="Screenshot 2024-02-06 at 15 03 57" src="https://github.com/zed-industries/zed/assets/43472/bd862753-41bb-4ca6-9a44-16b9b1c9591c"> | <img width="180" alt="Screenshot 2024-02-06 at 15 03 14" src="https://github.com/zed-industries/zed/assets/43472/9df8c589-64b6-49f2-8e15-b43126579a9f"> | The main challenge is that the tangram is visually quite heavy and detailed. The existing icons in Zed are designed in a 14px bounding box, but are a bit smaller themselves. I guess the extra space is reserved for hanging elements, it probably doesn't make sense to occupy the whole area. Simply scaling down an available SVG of the tangram didn't work well. The individual shapes were not recognizable because the spacing between them was too thin. I tried removing the spacing and applying different opacities for each shape, but that didn't yield enough contrast between the shapes either. The second approach was to just use the outlines. It sort of worked, but looked a bit messy in the places when the outlines are denser than the tangram shapes: | dark | light | |---|----| | <img width="192" alt="Screenshot 2024-02-05 at 22 55 46" src="https://github.com/zed-industries/zed/assets/43472/d0029f49-675d-40ac-96d8-788a29706bad"> | <img width="195" alt="Screenshot 2024-02-05 at 22 56 05" src="https://github.com/zed-industries/zed/assets/43472/d2de922a-70ec-4bd1-9033-db9a5201e9bd"> | I then tried to remove the main outline and use the maximum space for the tangram. That let me increase the spacing between the shapes. I also rounded them a little bit, to make them look similar to other icons from Zed. The end result looks clean and the shapes are still recognisable. Approaches I tried next to an existing icon from Zed: <img width="711" alt="Screenshot 2024-02-06 at 15 15 33" src="https://github.com/zed-industries/zed/assets/43472/a3e4b0db-4b98-4072-91e8-fe71cff19adf"> Release Notes: - Added file type icon for Elm
2024-02-06 15:25:38 +00:00
</svg>
Reference in a new issue Copy permalink