Skip to content

Commit dc0f1f7

Browse files
joladevjoladev
committed
Use brand_icon component
1 parent 5459bec commit dc0f1f7

1 file changed

Lines changed: 20 additions & 58 deletions

File tree

‎lib/jola_dev_web/components/core_components.ex‎

Lines changed: 20 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -657,14 +657,16 @@ defmodule JolaDevWeb.CoreComponents do
657657

658658
def brand_icon(assigns) do
659659
~H"""
660-
<svg
661-
class={[@class]}
662-
xmlns="http://www.w3.org/2000/svg"
663-
xml:space="preserve"
664-
viewBox="0 0 512 512"
665-
>
666-
{Phoenix.HTML.raw(path_for(assigns.name))}
667-
</svg>
660+
<span class={["inline-block align-middle shrink-0", @class]}>
661+
<svg
662+
class="size-full"
663+
xmlns="http://www.w3.org/2000/svg"
664+
viewBox="0 0 512 512"
665+
aria-hidden="true"
666+
>
667+
{Phoenix.HTML.raw(path_for(@name))}
668+
</svg>
669+
</span>
668670
"""
669671
end
670672

@@ -699,7 +701,7 @@ defmodule JolaDevWeb.CoreComponents do
699701
"""
700702
<path
701703
d="M455.1 0H56.9C25.5 0 0 25.5 0 56.9v398.2C0 486.5 25.5 512 56.9 512h398.2c31.4 0 56.9-25.5 56.9-56.9V56.9C512 25.5 486.5 0 455.1 0M154.8 440.9H78.5V194.4h76.4v246.5zm-38.5-278.8c-24.9 0-45.2-20.4-45.2-45.5s20.2-45.5 45.2-45.5 45.1 20.4 45.1 45.5-20.2 45.5-45.1 45.5m324.6 278.8h-76V311.5c0-35.5-13.5-55.3-41.6-55.3-30.5 0-46.5 20.6-46.5 55.3v129.4h-73.2V194.4h73.2v33.2s22-40.7 74.3-40.7 89.7 31.9 89.7 98v156z"
702-
style="fill-rule:evenodd;clip-rule:evenodd;fill:
704+
style="fill-rule:evenodd;clip-rule:evenodd;fill:currentColor"
703705
/>
704706
"""
705707
end
@@ -975,17 +977,7 @@ defmodule JolaDevWeb.CoreComponents do
975977
class="flex items-center justify-center w-9 h-9 rounded-lg text-muted-foreground hover:text-foreground hover:bg-surface transition-all"
976978
aria-label="GitHub"
977979
>
978-
<svg
979-
class="w-5 h-5"
980-
xmlns="http://www.w3.org/2000/svg"
981-
xml:space="preserve"
982-
viewBox="0 0 512 512"
983-
>
984-
<path
985-
d="M256 6.3C114.6 6.3 0 120.9 0 262.3c0 113.3 73.3 209 175 242.9 12.8 2.2 17.6-5.4 17.6-12.2 0-6.1-.3-26.2-.3-47.7-64.3 11.8-81-15.7-86.1-30.1-2.9-7.4-15.4-30.1-26.2-36.2-9-4.8-21.8-16.6-.3-17 20.2-.3 34.6 18.6 39.4 26.2 23 38.7 59.8 27.8 74.6 21.1 2.2-16.6 9-27.8 16.3-34.2-57-6.4-116.5-28.5-116.5-126.4 0-27.8 9.9-50.9 26.2-68.8-2.6-6.4-11.5-32.6 2.6-67.8 0 0 21.4-6.7 70.4 26.2 20.5-5.8 42.2-8.6 64-8.6s43.5 2.9 64 8.6c49-33.3 70.4-26.2 70.4-26.2 14.1 35.2 5.1 61.4 2.6 67.8 16.3 17.9 26.2 40.6 26.2 68.8 0 98.2-59.8 120-116.8 126.4 9.3 8 17.3 23.4 17.3 47.4 0 34.2-.3 61.8-.3 70.4 0 6.7 4.8 14.7 17.6 12.2C438.7 471.3 512 375.3 512 262.3c0-141.4-114.6-256-256-256"
986-
style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"
987-
/>
988-
</svg>
980+
<.brand_icon name="github" class="w-5 h-5" />
989981
</a>
990982
<a
991983
href="https://twitter.com/joladev"
@@ -994,17 +986,7 @@ defmodule JolaDevWeb.CoreComponents do
994986
class="flex items-center justify-center w-9 h-9 rounded-lg text-muted-foreground hover:text-foreground hover:bg-surface transition-all"
995987
aria-label="Twitter"
996988
>
997-
<svg
998-
class="w-5 h-5"
999-
xmlns="http://www.w3.org/2000/svg"
1000-
xml:space="preserve"
1001-
viewBox="0 0 512 512"
1002-
>
1003-
<path
1004-
d="M459.6 151.6c.3 4.5.3 9 .3 13.6C459.9 303.9 354.2 464 161 464v-.1c-57.1.1-113-16.2-161-47.1 8.3 1 16.6 1.5 25 1.5 47.3 0 93.2-15.8 130.5-45.1-44.9-.9-84.4-30.2-98.1-72.9 15.7 3 32 2.4 47.4-1.8-49-9.9-84.3-53-84.3-103v-1.3c14.6 8.1 31 12.6 47.7 13.1C22 176.6 7.8 115.2 35.7 67.1c53.3 65.6 132 105.5 216.5 109.7-8.5-36.5 3.1-74.7 30.4-100.4 42.3-39.8 108.8-37.7 148.6 4.6 23.5-4.6 46.1-13.3 66.7-25.5-7.8 24.3-24.3 45-46.2 58.1 20.8-2.5 41.2-8 60.3-16.5-14.1 21.2-31.9 39.6-52.4 54.5"
1005-
style="fill:#fff"
1006-
/>
1007-
</svg>
989+
<.brand_icon name="twitter" class="w-5 h-5" />
1008990
</a>
1009991
<a
1010992
href="https://bsky.app/profile/jola.dev"
@@ -1013,17 +995,7 @@ defmodule JolaDevWeb.CoreComponents do
1013995
class="flex items-center justify-center w-9 h-9 rounded-lg text-muted-foreground hover:text-foreground hover:bg-surface transition-all"
1014996
aria-label="Bluesky"
1015997
>
1016-
<svg
1017-
class="w-5 h-5"
1018-
xmlns="http://www.w3.org/2000/svg"
1019-
xml:space="preserve"
1020-
viewBox="0 0 512 512"
1021-
>
1022-
<path
1023-
d="M111 60.9c58.7 44.1 121.8 133.4 145 181.4 23.2-47.9 86.3-137.3 145-181.4 42.4-31.8 111-56.4 111 21.9 0 15.6-9 131.3-14.2 150.1-18.3 65.3-84.9 82-144.1 71.9 103.5 17.6 129.9 76 73 134.4-108 110.9-155.3-27.8-167.4-63.4-2.2-6.5-3.3-9.6-3.3-7 0-2.6-1.1.5-3.3 7-12.1 35.5-59.4 174.2-167.4 63.4-56.9-58.4-30.5-116.8 73-134.4-59.2 10.1-125.8-6.5-144.1-71.8C9 214.2 0 98.5 0 82.8 0 4.5 68.6 29.1 111 60.9"
1024-
style="fill:#fff"
1025-
/>
1026-
</svg>
998+
<.brand_icon name="bluesky" class="w-5 h-5" />
1027999
</a>
10281000
<a
10291001
href="https://linkedin.com/in/joladev"
@@ -1032,17 +1004,7 @@ defmodule JolaDevWeb.CoreComponents do
10321004
class="flex items-center justify-center w-9 h-9 rounded-lg text-muted-foreground hover:text-foreground hover:bg-surface transition-all"
10331005
aria-label="LinkedIn"
10341006
>
1035-
<svg
1036-
class="w-5 h-5"
1037-
xmlns="http://www.w3.org/2000/svg"
1038-
xml:space="preserve"
1039-
viewBox="0 0 512 512"
1040-
>
1041-
<path
1042-
d="M455.1 0H56.9C25.5 0 0 25.5 0 56.9v398.2C0 486.5 25.5 512 56.9 512h398.2c31.4 0 56.9-25.5 56.9-56.9V56.9C512 25.5 486.5 0 455.1 0M154.8 440.9H78.5V194.4h76.4v246.5zm-38.5-278.8c-24.9 0-45.2-20.4-45.2-45.5s20.2-45.5 45.2-45.5 45.1 20.4 45.1 45.5-20.2 45.5-45.1 45.5m324.6 278.8h-76V311.5c0-35.5-13.5-55.3-41.6-55.3-30.5 0-46.5 20.6-46.5 55.3v129.4h-73.2V194.4h73.2v33.2s22-40.7 74.3-40.7 89.7 31.9 89.7 98v156z"
1043-
style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"
1044-
/>
1045-
</svg>
1007+
<.brand_icon name="linkedin" class="w-5 h-5" />
10461008
</a>
10471009
<a
10481010
href="/rss.xml"
@@ -1082,15 +1044,15 @@ defmodule JolaDevWeb.CoreComponents do
10821044
</.link>
10831045
10841046
<div :if={@social_links} class="pt-4 border-t border-border">
1085-
<div class="flex items-center space-x-2">
1047+
<div class="flex items-center space-x-2 flex-nowrap">
10861048
<a
10871049
href="https://github.com/joladev"
10881050
target="_blank"
10891051
rel="noopener"
10901052
class="text-muted-foreground hover:text-foreground transition-colors"
10911053
aria-label="GitHub"
10921054
>
1093-
<.icon name="lucide-github" class="w-5 h-5" />
1055+
<.brand_icon name="github" class="w-5 h-5" />
10941056
</a>
10951057
<a
10961058
href="https://twitter.com/joladev"
@@ -1099,7 +1061,7 @@ defmodule JolaDevWeb.CoreComponents do
10991061
class="text-muted-foreground hover:text-foreground transition-colors"
11001062
aria-label="Twitter"
11011063
>
1102-
<.icon name="lucide-x" class="w-5 h-5" />
1064+
<.brand_icon name="twitter" class="w-5 h-5" />
11031065
</a>
11041066
<a
11051067
href="https://bsky.app/profile/jola.dev"
@@ -1108,7 +1070,7 @@ defmodule JolaDevWeb.CoreComponents do
11081070
class="text-muted-foreground hover:text-foreground transition-colors"
11091071
aria-label="Bluesky"
11101072
>
1111-
<.icon name="lucide-cloud" class="w-5 h-5" />
1073+
<.brand_icon name="bluesky" class="w-5 h-5" />
11121074
</a>
11131075
<a
11141076
href="https://linkedin.com/in/joladev"
@@ -1117,7 +1079,7 @@ defmodule JolaDevWeb.CoreComponents do
11171079
class="text-muted-foreground hover:text-foreground transition-colors"
11181080
aria-label="LinkedIn"
11191081
>
1120-
<.icon name="lucide-linkedin" class="w-5 h-5" />
1082+
<.brand_icon name="linkedin" class="w-5 h-5" />
11211083
</a>
11221084
<a
11231085
href="/rss.xml"

0 commit comments

Comments
 (0)