Skip to content

Commit cd7c4a0

Browse files
wyatt-avillawyatt-avilla
committed
svg's as assets instead of in html macros
1 parent 4ac468f commit cd7c4a0

File tree

15 files changed

+74
-99
lines changed

15 files changed

+74
-99
lines changed

‎frontend/src/components/assets/cake.svg

+3
Loading

‎frontend/src/components/assets/clock.svg

+3
Loading

‎frontend/src/components/assets/github.svg

+10
Loading

‎frontend/src/components/assets/goodreads.svg

+3
Loading

‎frontend/src/components/assets/lastfm.svg

+3
Loading

‎frontend/src/components/assets/letterboxd.svg

+30
Loading

‎frontend/src/components/assets/play.svg

+10
Loading

‎frontend/src/components/assets/repo.svg

+4
Loading

‎frontend/src/components/github/button.rs

+1-15
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,14 @@ use yew::prelude::*;
44

55
#[styled_component]
66
pub fn Button() -> Html {
7-
let icon_svg = html! {
8-
<svg width="60px" height="60px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
9-
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
10-
<g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7559.000000)" fill="#fff">
11-
<g id="icons" transform="translate(56.000000, 160.000000)">
12-
<path d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399" id="github-[#142]">
13-
14-
</path>
15-
</g>
16-
</g>
17-
</g>
18-
</svg>
19-
};
20-
217
html! {
228
<a href={ SOCIAL.github } class={css!(r#"
239
background: none;
2410
border: none;
2511
cursor: pointer;
2612
border-radius: 50%;
2713
"#)}>
28-
{ icon_svg.clone() }
14+
<img src="/assets/github.svg" alt="Github Icon" />
2915
</a>
3016
}
3117
}

‎frontend/src/components/github/row.rs

+1-8
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,6 @@ pub fn Row(props: &Commit) -> Html {
1212
repository_link,
1313
} = props;
1414

15-
let repo_svg = html! {
16-
<svg fill="#89929b" width="16px" height="16px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
17-
<path fill-rule="evenodd" d="M3 2.75A2.75 2.75 0 015.75 0h14.5a.75.75 0 01.75.75v20.5a.75.75 0 01-.75.75h-6a.75.75 0 010-1.5h5.25v-4H6A1.5 1.5 0 004.5 18v.75c0 .716.43 1.334 1.05 1.605a.75.75 0 01-.6 1.374A3.25 3.25 0 013 18.75v-16zM19.5 1.5V15H6c-.546 0-1.059.146-1.5.401V2.75c0-.69.56-1.25 1.25-1.25H19.5z"/>
18-
<path d="M7 18.25a.25.25 0 01.25-.25h5a.25.25 0 01.25.25v5.01a.25.25 0 01-.397.201l-2.206-1.604a.25.25 0 00-.294 0L7.397 23.46a.25.25 0 01-.397-.2v-5.01z"/>
19-
</svg>
20-
};
21-
2215
html! {
2316
<div class={css!(r#"
2417
width: 100%;
@@ -58,7 +51,7 @@ pub fn Row(props: &Commit) -> Html {
5851
"#)}>
5952
{ repository_name }
6053
</a>
61-
{ repo_svg.clone() }
54+
<img src="/assets/repo.svg" alt="Repo Icon" />
6255
</div>
6356
</div>
6457
</div>

‎frontend/src/components/goodreads/button.rs

+1-7
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,14 @@ use yew::prelude::*;
44

55
#[styled_component]
66
pub fn Button() -> Html {
7-
let icon_svg = html! {
8-
<svg fill="#382110" width="60px" height="60px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg">
9-
<path d="M19.525 15.977V.49h-2.059v2.906h-.064c-.211-.455-.481-.891-.842-1.307-.36-.412-.767-.777-1.232-1.094-.466-.314-.962-.561-1.519-.736C13.256.09 12.669 0 12.038 0c-1.21 0-2.3.225-3.246.67-.947.447-1.743 1.057-2.385 1.83-.642.773-1.133 1.676-1.47 2.711-.336 1.037-.506 2.129-.506 3.283 0 1.199.141 2.326.425 3.382.286 1.057.737 1.976 1.368 2.762.631.78 1.412 1.397 2.375 1.833.961.436 2.119.661 3.471.661 1.248 0 2.33-.315 3.262-.946s1.638-1.473 2.119-2.525h.061v2.284c0 2.044-.421 3.607-1.264 4.705-.84 1.081-2.224 1.638-4.146 1.638-.572 0-1.128-.061-1.669-.181-.542-.12-1.036-.315-1.487-.57-.437-.271-.827-.601-1.143-1.038-.316-.435-.526-.961-.632-1.593H5.064c.067.887.315 1.654.737 2.3.424.646.961 1.172 1.602 1.593.641.406 1.367.706 2.172.902.811.194 1.639.3 2.494.3 1.383 0 2.541-.195 3.486-.555.947-.376 1.714-.902 2.301-1.608.601-.708 1.021-1.549 1.293-2.556.27-1.007.42-2.134.42-3.367l-.044.062zm-7.484-.557c-.955 0-1.784-.189-2.479-.571-.697-.38-1.277-.882-1.732-1.503-.467-.621-.797-1.332-1.022-2.139s-.332-1.633-.332-2.484c0-.871.105-1.725.301-2.563.21-.84.54-1.587.992-2.24.451-.652 1.037-1.182 1.728-1.584s1.533-.605 2.51-.605 1.803.209 2.495.621c.676.415 1.247.959 1.683 1.634.436.677.751 1.429.947 2.255.195.826.285 1.656.285 2.482 0 .852-.12 1.678-.345 2.484-.226.807-.572 1.518-1.038 2.139-.465.621-1.021 1.123-1.698 1.503-.676.382-1.458.571-2.359.571h.064z"/>
10-
</svg>
11-
};
12-
137
html! {
148
<a href={ SOCIAL.goodreads } class={css!(r#"
159
background: none;
1610
border: none;
1711
cursor: pointer;
1812
border-radius: 50%;
1913
"#)}>
20-
{ icon_svg.clone() }
14+
<img src="/assets/goodreads.svg" alt="Goodreads Icon" />
2115
</a>
2216
}
2317
}

‎frontend/src/components/lastfm/button.rs

+1-7
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,14 @@ use yew::prelude::*;
44

55
#[styled_component]
66
pub fn Button() -> Html {
7-
let icon_svg = html! {
8-
<svg fill="#BA0000" width="60px" height="60px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
9-
<path d="M14.131 22.948l-1.172-3.193c0 0-1.912 2.131-4.771 2.131-2.537 0-4.333-2.203-4.333-5.729 0-4.511 2.276-6.125 4.515-6.125 3.224 0 4.245 2.089 5.125 4.772l1.161 3.667c1.161 3.561 3.365 6.421 9.713 6.421 4.548 0 7.631-1.391 7.631-5.068 0-2.968-1.697-4.511-4.844-5.244l-2.344-0.511c-1.624-0.371-2.104-1.032-2.104-2.131 0-1.249 0.985-1.984 2.604-1.984 1.767 0 2.704 0.661 2.865 2.24l3.661-0.444c-0.297-3.301-2.584-4.656-6.323-4.656-3.308 0-6.532 1.251-6.532 5.245 0 2.5 1.204 4.077 4.245 4.807l2.484 0.589c1.865 0.443 2.484 1.224 2.484 2.287 0 1.359-1.323 1.921-3.828 1.921-3.703 0-5.244-1.943-6.124-4.625l-1.204-3.667c-1.541-4.765-4.005-6.531-8.891-6.531-5.287-0.016-8.151 3.385-8.151 9.192 0 5.573 2.864 8.595 8.005 8.595 4.14 0 6.125-1.943 6.125-1.943z"/>
10-
</svg>
11-
};
12-
137
html! {
148
<a href={ SOCIAL.lastfm } class={css!(r#"
159
background: none;
1610
border: none;
1711
cursor: pointer;
1812
border-radius: 50%;
1913
"#)}>
20-
{ icon_svg.clone() }
14+
<img src="/assets/lastfm.svg" alt="Lastfm Icon" />
2115
</a>
2216
}
2317
}

‎frontend/src/components/lastfm/row.rs

+1-14
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,6 @@ pub fn Row(props: &Song) -> Html {
1313
url,
1414
} = props;
1515

16-
let play_svg = html! {
17-
<svg width="16px" height="16px" viewBox="-1 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg">
18-
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
19-
<g id="Dribbble-Light-Preview" transform="translate(-65.000000, -3803.000000)" fill="#000000">
20-
<g id="icons" transform="translate(56.000000, 160.000000)">
21-
<path d="M18.074,3650.7335 L12.308,3654.6315 C10.903,3655.5815 9,3654.5835 9,3652.8985 L9,3645.1015 C9,3643.4155 10.903,3642.4185 12.308,3643.3685 L18.074,3647.2665 C19.306,3648.0995 19.306,3649.9005 18.074,3650.7335" id="play-[#1000]">
22-
</path>
23-
</g>
24-
</g>
25-
</g>
26-
</svg>
27-
};
28-
2916
html! {
3017
<div class={css!(r#"
3118
width: 100%;
@@ -74,7 +61,7 @@ pub fn Row(props: &Song) -> Html {
7461
display: flex;
7562
align-items: center;
7663
"#)}>
77-
{ play_svg.clone() }
64+
<img src="/assets/play.svg" alt="Play Button Icon" />
7865
</a>
7966
</div>
8067
</div>

‎frontend/src/components/letterboxd/button.rs

+1-34
Original file line numberDiff line numberDiff line change
@@ -4,47 +4,14 @@ use yew::prelude::*;
44

55
#[styled_component]
66
pub fn Button() -> Html {
7-
let icon_svg = html! {
8-
<svg width="60px" height="60px" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg">
9-
<defs>
10-
<rect id="path-1" x="0" y="0" width="129.847328" height="141.389313"></rect>
11-
<rect id="path-3" x="0" y="0" width="129.847328" height="141.389313"></rect>
12-
</defs>
13-
<g id="letterboxd-decal-dots-neg-rgb" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
14-
<circle id="Circle" fill="#202830" cx="250" cy="250" r="250"></circle>
15-
<g id="dots-pos" transform="translate(61.000000, 180.000000)">
16-
<g id="Dots">
17-
<ellipse id="Green" fill="#00E054" cx="189" cy="69.9732824" rx="70.0786517" ry="69.9732824"></ellipse>
18-
<g id="Blue" transform="translate(248.152672, 0.000000)">
19-
<mask id="mask-2" fill="white">
20-
<use href="#path-1"></use>
21-
</mask>
22-
<g id="Mask"></g>
23-
<ellipse fill="#40BCF4" mask="url(#mask-2)" cx="59.7686766" cy="69.9732824" rx="70.0786517" ry="69.9732824"></ellipse>
24-
</g>
25-
<g id="Orange">
26-
<mask id="mask-4" fill="white">
27-
<use href="#path-3"></use>
28-
</mask>
29-
<g id="Mask"></g>
30-
<ellipse fill="#FF8000" mask="url(#mask-4)" cx="70.0786517" cy="69.9732824" rx="70.0786517" ry="69.9732824"></ellipse>
31-
</g>
32-
<path d="M129.539326,107.022244 C122.810493,96.2781677 118.921348,83.5792213 118.921348,69.9732824 C118.921348,56.3673435 122.810493,43.6683972 129.539326,32.9243209 C136.268159,43.6683972 140.157303,56.3673435 140.157303,69.9732824 C140.157303,83.5792213 136.268159,96.2781677 129.539326,107.022244 Z" id="Overlap" fill="#556677"></path>
33-
<path d="M248.460674,32.9243209 C255.189507,43.6683972 259.078652,56.3673435 259.078652,69.9732824 C259.078652,83.5792213 255.189507,96.2781677 248.460674,107.022244 C241.731841,96.2781677 237.842697,83.5792213 237.842697,69.9732824 C237.842697,56.3673435 241.731841,43.6683972 248.460674,32.9243209 Z" id="Overlap" fill="#556677"></path>
34-
</g>
35-
</g>
36-
</g>
37-
</svg>
38-
};
39-
407
html! {
418
<a href={ SOCIAL.letterboxd } class={css!(r#"
429
background: none;
4310
border: none;
4411
cursor: pointer;
4512
border-radius: 50%;
4613
"#)}>
47-
{ icon_svg.clone() }
14+
<img src="/assets/letterboxd.svg" alt="Letterboxd Icon" />
4815
</a>
4916
}
5017
}

0 commit comments

Comments
 (0)