From 33d982b08aa5c6dbcce5dfb164fa2c84086a11c8 Mon Sep 17 00:00:00 2001
From: Andrey Kuzmin <hi@unsoundscapes.com>
Date: Tue, 6 Feb 2024 16:25:38 +0100
Subject: [PATCH] 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
---
 assets/icons/file_icons/elm.svg         | 9 +++++++++
 assets/icons/file_icons/file_types.json | 4 ++++
 2 files changed, 13 insertions(+)
 create mode 100644 assets/icons/file_icons/elm.svg

diff --git a/assets/icons/file_icons/elm.svg b/assets/icons/file_icons/elm.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3e05cf9d5ca1b02f7cd97d7fcf859e572d16a689
--- /dev/null
+++ b/assets/icons/file_icons/elm.svg
@@ -0,0 +1,9 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.7295 12.1981L7.17677 7.64544C7.07914 7.5478 6.92085 7.5478 6.82322 7.64544L2.27053 12.1981C2.11304 12.3556 2.22458 12.6249 2.4473 12.6249H11.5527C11.7754 12.6249 11.887 12.3556 11.7295 12.1981Z" fill="black" fill-opacity="0.9"/>
+<path d="M1.80178 11.7294L6.35447 7.17668C6.4521 7.07905 6.4521 6.92076 6.35447 6.82312L1.80178 2.27043C1.64429 2.11294 1.375 2.22448 1.375 2.44721L1.375 11.5526C1.375 11.7753 1.64428 11.8869 1.80178 11.7294Z" fill="black" fill-opacity="0.9"/>
+<path d="M9.98928 9.16694L11.9794 7.17751C12.0771 7.0799 12.0771 6.92161 11.9795 6.82396L9.98928 4.833C9.89165 4.73534 9.73333 4.73532 9.63569 4.83297L7.64553 6.82313C7.5479 6.92076 7.5479 7.07905 7.64553 7.17668L9.63575 9.16691C9.73337 9.26453 9.89164 9.26455 9.98928 9.16694Z" fill="black" fill-opacity="0.9"/>
+<path d="M7.89553 1.80168L12.1982 6.10438C12.3557 6.26187 12.625 6.15033 12.625 5.9276V2.37491C12.625 1.82262 12.1773 1.37491 11.625 1.37491H8.0723C7.84958 1.37491 7.73804 1.64419 7.89553 1.80168Z" fill="black" fill-opacity="0.6"/>
+<path d="M8.73976 4.18772L5.25981 4.1895C5.03708 4.18962 4.92567 4.45896 5.08325 4.61637L6.82322 6.35456C6.92087 6.45211 7.07909 6.45207 7.17669 6.35447L8.91666 4.61449C9.0742 4.45696 8.96255 4.1876 8.73976 4.18772Z" fill="black" fill-opacity="0.6"/>
+<path d="M8.1147 3.55936L4.13431 3.55936C4.06801 3.55936 4.00442 3.53302 3.95753 3.48614L2.27057 1.79918C2.11308 1.64169 2.22462 1.37241 2.44735 1.37241L6.42774 1.37241C6.49405 1.37241 6.55763 1.39874 6.60452 1.44563L8.29148 3.13258C8.44897 3.29007 8.33743 3.55936 8.1147 3.55936Z" fill="black" fill-opacity="0.6"/>
+<path d="M12.625 8.07221V11.5526C12.625 11.7753 12.3557 11.8869 12.1982 11.7294L10.458 9.98918C10.3604 9.89155 10.3604 9.73326 10.458 9.63563L12.1982 7.89544C12.3557 7.73794 12.625 7.84949 12.625 8.07221Z" fill="black" fill-opacity="0.6"/>
+</svg>
diff --git a/assets/icons/file_icons/file_types.json b/assets/icons/file_icons/file_types.json
index 916ccc89cb1db63c1e383d5f69e5eeed180a41cd..88c1c650235939317a5c896898d8e96f044dbf5c 100644
--- a/assets/icons/file_icons/file_types.json
+++ b/assets/icons/file_icons/file_types.json
@@ -25,6 +25,7 @@
         "doc": "document",
         "docx": "document",
         "eex": "elixir",
+        "elm": "elm",
         "erl": "erlang",
         "escript": "erlang",
         "eslintrc": "eslint",
@@ -155,6 +156,9 @@
         "elixir": {
             "icon": "icons/file_icons/elixir.svg"
         },
+        "elm": {
+            "icon": "icons/file_icons/elm.svg"
+        },
         "erlang": {
             "icon": "icons/file_icons/erlang.svg"
         },