[feat] Customized Icons for Renewable Energy Technology and Status (incl. Proposed COD) #63

nehaahussain · 2024-11-08T23:38:05Z

What's new in this PR

Description

Added the icon files for status and technology tags to the assets folder.
Created status tag component that displays the status with the status icon.
Created technology tag component that displays the technology with the technology icon.

Screenshots

How to review

Next steps

Relevant links

Online sources

Related PRs

CC: @itsliterallymonique

…energy-technology-and-status-incl-proposed-cod

itsliterallymonique

Please make the changes to the Techology-Tag-Icons SVG and your TechnologyTag that I have commented ASAP! Once you've made these changes, please let us know in the SVG thread on slack.

I will continue checking the rest of your PR soon and make any additional comments if I need to.

You don't need to change anything with Status-Tag-Icons

itsliterallymonique · 2024-11-11T19:00:26Z

assets/Technology-Tag-Icons/icons.tsx

@@ -0,0 +1,120 @@
+export const OffshoreWindIcon = () => (


for all technology tag icons, add the following props props: { fill: string | undefined; stroke: string | undefined; }. This will allow us to change the color of the SVG (so that Ethan can change them to navy!). Then for all fill and stroke (except for when fill="none"), use the props e.g. fill={props.fill}. I will comment where you should do that for the first 2 icons! Below is a screenshot to help.

itsliterallymonique · 2024-11-11T19:00:40Z

assets/Technology-Tag-Icons/icons.tsx

+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.86023 9.24538C2.12061 8.9049 2.66514 8.91764 2.94023 9.21183C3.3108 9.608 3.83306 9.99679 4.65948 9.99679C5.50023 9.99679 6.01457 9.68482 6.36476 9.29369C6.63683 8.98943 7.21721 8.94045 7.5025 9.3014C7.7357 9.5966 7.9908 9.83142 8.49419 9.93105C8.56569 9.94697 8.62737 9.98706 8.66613 10.0428C8.70489 10.0985 8.71766 10.1655 8.70174 10.2295C8.68581 10.2934 8.64244 10.3493 8.58085 10.3853C8.51926 10.4213 8.4443 10.4345 8.37193 10.4221C7.67721 10.2853 7.3157 9.94044 7.0391 9.59056C7.02099 9.56741 6.98816 9.55031 6.93872 9.55131C6.9137 9.5516 6.88904 9.5567 6.86644 9.56625C6.84384 9.57581 6.82383 9.58959 6.80778 9.60666C6.36401 10.1025 5.69344 10.5 4.65948 10.5C3.59419 10.5 2.9274 9.98606 2.50476 9.5332C2.49274 9.52045 2.47765 9.51027 2.4606 9.50341C2.44355 9.49656 2.42498 9.49321 2.40627 9.49362C2.39099 9.4931 2.37582 9.49603 2.36216 9.50213C2.34851 9.50823 2.33681 9.5173 2.32816 9.5285C2.04665 9.89649 1.68551 10.2766 0.947024 10.4221C0.910331 10.4303 0.872168 10.4319 0.83479 10.4267C0.797411 10.4215 0.761576 10.4098 0.729402 10.3921C0.697228 10.3744 0.669368 10.3512 0.647469 10.3238C0.625569 10.2963 0.610075 10.2653 0.601901 10.2325C0.593727 10.1996 0.59304 10.1657 0.59988 10.1326C0.606721 10.0995 0.620949 10.068 0.641725 10.0399C0.662501 10.0118 0.689403 9.98771 0.720841 9.96901C0.752278 9.95031 0.787614 9.9374 0.82476 9.93105C1.35759 9.82571 1.61268 9.56876 1.86023 9.24538Z"
+      fill="#4974E0"


fill={props.fill}

itsliterallymonique · 2024-11-11T19:00:48Z

assets/Technology-Tag-Icons/icons.tsx

+    />
+    <path
+      d="M2.50476 9.5332C2.9274 9.98606 3.59419 10.5 4.65948 10.5C5.69344 10.5 6.364 10.1025 6.80778 9.60666C6.82383 9.58959 6.84384 9.57581 6.86644 9.56625C6.88904 9.5567 6.9137 9.5516 6.93872 9.55131C6.98816 9.55031 7.02099 9.56741 7.0391 9.59056C7.3157 9.94044 7.67721 10.2853 8.37193 10.4221C8.4443 10.4345 8.51926 10.4213 8.58085 10.3853C8.64244 10.3493 8.68581 10.2934 8.70174 10.2295C8.71766 10.1655 8.70489 10.0985 8.66613 10.0428C8.62737 9.98706 8.56569 9.94697 8.49419 9.93105C7.9908 9.83142 7.7357 9.5966 7.5025 9.3014C7.21721 8.94045 6.63683 8.98943 6.36476 9.29369C6.01457 9.68482 5.50023 9.99679 4.65948 9.99679C3.83306 9.99679 3.3108 9.608 2.94023 9.21183C2.66514 8.91764 2.12061 8.9049 1.86023 9.24538C1.61268 9.56876 1.35759 9.82571 0.82476 9.93105C0.787614 9.9374 0.752278 9.95031 0.720841 9.96901C0.689403 9.98771 0.662501 10.0118 0.641725 10.0399C0.620949 10.068 0.606721 10.0995 0.59988 10.1326C0.59304 10.1657 0.593727 10.1996 0.601901 10.2325C0.610075 10.2653 0.625569 10.2963 0.647469 10.3238C0.669368 10.3512 0.697228 10.3744 0.729402 10.3921C0.761576 10.4098 0.797411 10.4215 0.83479 10.4267C0.872168 10.4319 0.910331 10.4303 0.947024 10.4221C1.68551 10.2766 2.04665 9.89649 2.32816 9.5285C2.33681 9.5173 2.34851 9.50823 2.36216 9.50213C2.37582 9.49603 2.39099 9.4931 2.40627 9.49362C2.42498 9.49321 2.44355 9.49656 2.4606 9.50341C2.47765 9.51027 2.49274 9.52045 2.50476 9.5332ZM2.50476 9.5332L2.7225 9.37218"
+      stroke="#2E3A59"


stroke={props.stroke}

itsliterallymonique · 2024-11-11T19:00:53Z

assets/Technology-Tag-Icons/icons.tsx

+    />
+    <path
+      d="M8.04066 6.85855L7.2403 5.33102C7.14338 5.1547 6.98428 5.02636 6.798 4.97422L5.86074 4.7252C5.8467 4.55052 5.80457 4.38328 5.72383 4.23089L7.11393 1.78164C7.3421 1.38024 7.21924 0.859911 6.84012 0.618331C6.69047 0.524723 6.5162 0.484992 6.34342 0.505094C6.17065 0.525196 6.00868 0.604048 5.8818 0.729829L4.67775 1.92287C4.53734 2.06038 4.4566 2.25736 4.4566 2.46178V3.72543C4.29161 3.78861 4.14418 3.89268 4.02483 4.0302H1.39557C0.94625 4.0302 0.595215 4.40186 0.595215 4.87759C0.595215 5.25668 0.830408 5.58746 1.17442 5.69153L2.75759 6.17097C2.82078 6.18956 2.88747 6.20071 2.95066 6.20071C3.07703 6.20071 3.2034 6.16354 3.31222 6.09292L4.10556 5.5949C4.20034 5.69153 4.31969 5.76958 4.4566 5.82161V9.9825C4.07046 9.9825 3.75453 9.90249 3.75453 10.3113H5.86074C5.86074 9.90249 5.54481 9.9825 5.15867 9.9825V6.15611L6.77694 7.86947C6.9349 8.03672 7.1385 8.11849 7.3421 8.11849C7.5457 8.11849 7.75282 8.03672 7.90727 7.86947C8.16002 7.60188 8.21618 7.18933 8.04066 6.85855ZM2.95417 5.45738L1.36749 4.97794C1.32537 4.95935 1.29728 4.92219 1.29728 4.87759C1.29728 4.82184 1.34292 4.77352 1.39557 4.77352H3.75453C3.75453 4.82927 3.75453 4.88502 3.76857 4.93705L2.95417 5.45738ZM4.80763 5.14518C4.61456 5.14518 4.4566 4.97794 4.4566 4.77352C4.4566 4.56911 4.61456 4.40186 4.80763 4.40186C5.0007 4.40186 5.15867 4.56911 5.15867 4.77352C5.15867 4.97794 5.0007 5.14518 4.80763 5.14518ZM5.15867 3.71057V2.46178L6.36272 1.26874C6.38729 1.24272 6.42941 1.22414 6.48207 1.25387C6.5277 1.28361 6.54526 1.34679 6.51717 1.39511L5.2043 3.71428L5.15867 3.71057ZM7.41231 7.34543C7.39476 7.36401 7.32806 7.40489 7.26488 7.34543L5.56938 5.54286C5.59746 5.51685 5.62554 5.47596 5.65363 5.4388L6.6295 5.70268L7.42986 7.21906C7.45093 7.25995 7.44039 7.31198 7.41231 7.34543Z"
+      fill="#4974E0"


fill={props.fill}

itsliterallymonique · 2024-11-11T19:01:52Z

assets/Technology-Tag-Icons/icons.tsx

+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.86023 9.24538C2.12061 8.9049 2.66514 8.91764 2.94023 9.21183C3.3108 9.608 3.83306 9.99679 4.65948 9.99679C5.50023 9.99679 6.01457 9.68482 6.36476 9.29369C6.63683 8.98943 7.21721 8.94045 7.5025 9.3014C7.7357 9.5966 7.9908 9.83142 8.49419 9.93105C8.56569 9.94697 8.62737 9.98706 8.66613 10.0428C8.70489 10.0985 8.71766 10.1655 8.70174 10.2295C8.68581 10.2934 8.64244 10.3493 8.58085 10.3853C8.51926 10.4213 8.4443 10.4345 8.37193 10.4221C7.67721 10.2853 7.3157 9.94044 7.0391 9.59056C7.02099 9.56741 6.98816 9.55031 6.93872 9.55131C6.9137 9.5516 6.88904 9.5567 6.86644 9.56625C6.84384 9.57581 6.82383 9.58959 6.80778 9.60666C6.36401 10.1025 5.69344 10.5 4.65948 10.5C3.59419 10.5 2.9274 9.98606 2.50476 9.5332C2.49274 9.52045 2.47765 9.51027 2.4606 9.50341C2.44355 9.49656 2.42498 9.49321 2.40627 9.49362C2.39099 9.4931 2.37582 9.49603 2.36216 9.50213C2.34851 9.50823 2.33681 9.5173 2.32816 9.5285C2.04665 9.89649 1.68551 10.2766 0.947024 10.4221C0.910331 10.4303 0.872168 10.4319 0.83479 10.4267C0.797411 10.4215 0.761576 10.4098 0.729402 10.3921C0.697228 10.3744 0.669368 10.3512 0.647469 10.3238C0.625569 10.2963 0.610075 10.2653 0.601901 10.2325C0.593727 10.1996 0.59304 10.1657 0.59988 10.1326C0.606721 10.0995 0.620949 10.068 0.641725 10.0399C0.662501 10.0118 0.689403 9.98771 0.720841 9.96901C0.752278 9.95031 0.787614 9.9374 0.82476 9.93105C1.35759 9.82571 1.61268 9.56876 1.86023 9.24538Z"
+      fill="#4974E0"


Then for all the fill and stroke colors, make sure to add them to the colors.ts global colors stylesheet if they are not there already!

itsliterallymonique · 2024-11-11T19:02:16Z

assets/Technology-Tag-Icons/icons.tsx

+  </svg>
+);
+
+export const EnergyStorageIcon = () => (


export const EnergyStorageIcon = (props: { fill: string | undefined; stroke: string | undefined; }) etc...

itsliterallymonique · 2024-11-11T19:02:47Z

assets/Technology-Tag-Icons/icons.tsx

+  >
+    <path
+      d="M11.9228 6.4H11.8228V6.5C11.8228 7.00391 11.6226 7.48718 11.2663 7.8435C10.91 8.19982 10.4267 8.4 9.92278 8.4H2.2085C1.70458 8.4 1.22131 8.19982 0.864993 7.8435C0.508674 7.48718 0.308496 7.00391 0.308496 6.5V2.5C0.308496 1.99609 0.508674 1.51282 0.864993 1.1565C1.22131 0.800178 1.70458 0.6 2.2085 0.6H9.92278C10.4267 0.6 10.91 0.800178 11.2663 1.1565C11.6226 1.51282 11.8228 1.99609 11.8228 2.5V2.6H11.9228C12.0731 2.6 12.2172 2.6597 12.3235 2.76597C12.4297 2.87224 12.4894 3.01638 12.4894 3.16667V5.83333C12.4894 5.98362 12.4297 6.12776 12.3235 6.23403C12.2172 6.3403 12.0731 6.4 11.9228 6.4ZM9.92278 1.73333H2.2085C2.00516 1.73333 1.81016 1.81411 1.66638 1.95789C1.5226 2.10166 1.44183 2.29667 1.44183 2.5V6.5C1.44183 6.70333 1.5226 6.89834 1.66638 7.04212C1.81016 7.18589 2.00516 7.26667 2.2085 7.26667H9.92278C10.1261 7.26667 10.3211 7.18589 10.4649 7.04212C10.6087 6.89834 10.6894 6.70333 10.6894 6.5V2.5C10.6894 2.29667 10.6087 2.10166 10.4649 1.95788C10.3211 1.81411 10.1261 1.73333 9.92278 1.73333Z"
+      fill="#4896BC"


fill={props.fill}

itsliterallymonique · 2024-11-11T19:02:55Z

assets/Technology-Tag-Icons/icons.tsx

+    <path
+      d="M11.9228 6.4H11.8228V6.5C11.8228 7.00391 11.6226 7.48718 11.2663 7.8435C10.91 8.19982 10.4267 8.4 9.92278 8.4H2.2085C1.70458 8.4 1.22131 8.19982 0.864993 7.8435C0.508674 7.48718 0.308496 7.00391 0.308496 6.5V2.5C0.308496 1.99609 0.508674 1.51282 0.864993 1.1565C1.22131 0.800178 1.70458 0.6 2.2085 0.6H9.92278C10.4267 0.6 10.91 0.800178 11.2663 1.1565C11.6226 1.51282 11.8228 1.99609 11.8228 2.5V2.6H11.9228C12.0731 2.6 12.2172 2.6597 12.3235 2.76597C12.4297 2.87224 12.4894 3.01638 12.4894 3.16667V5.83333C12.4894 5.98362 12.4297 6.12776 12.3235 6.23403C12.2172 6.3403 12.0731 6.4 11.9228 6.4ZM9.92278 1.73333H2.2085C2.00516 1.73333 1.81016 1.81411 1.66638 1.95789C1.5226 2.10166 1.44183 2.29667 1.44183 2.5V6.5C1.44183 6.70333 1.5226 6.89834 1.66638 7.04212C1.81016 7.18589 2.00516 7.26667 2.2085 7.26667H9.92278C10.1261 7.26667 10.3211 7.18589 10.4649 7.04212C10.6087 6.89834 10.6894 6.70333 10.6894 6.5V2.5C10.6894 2.29667 10.6087 2.10166 10.4649 1.95788C10.3211 1.81411 10.1261 1.73333 9.92278 1.73333Z"
+      fill="#4896BC"
+      stroke="white"


stroke={props.stroke}

itsliterallymonique · 2024-11-11T19:04:24Z

components/TechnologyTag/index.tsx

+  technology: string | undefined;
+}) {
+  const iconMap: { [key: string]: JSX.Element } = {
+    'Solar PV': <SolarPvIcon />,


For each SVG icon component, you will now need to pass in the fill and stroke props. Below is an example using Offshore Wind (but just make sure you use the colors.ts global colors stylesheet. it should look something like fill={COLORS.navy})

…nology-and-status-incl-proposed-cod' of https://github.com/calblueprint/ace-ny into neha/51-feat-customized-icons-for-renewable-energy-technology-and-status-incl-proposed-cod

itsliterallymonique

You don't need to have a stroke prop for those icons that don't have a stroke in their path. But other than that, you can squash and merge when you're ready!

itsliterallymonique · 2024-11-11T20:54:59Z

assets/Technology-Tag-Icons/icons.tsx

+
+export const LandBasedWindIcon = (props: {
+  fill: string | undefined;
+  stroke: string | undefined;


if stroke is not passed into this icon, we don't need to have a stroke prop! You can remove this.

* Added Project Item component * meep * fixed font issues kinda * minor fixes * chore: styling fixes (#64) * chore: styling fixes * adjusted favicon and page title * adjusted favicon and page title * [feat] Customized Icons for Renewable Energy Technology and Status (incl. Proposed COD) (#63) * [chore] added tags, files * [chore] file fixes * [chore] file fixes * [feat] finished status tags * [feat] did tech tags * [chore] rem * [feat] done? * [chore] small fixes * [chore] name change, cod * [feat] proposed styling * [chore] refactoring * [feat] fixed icons * [chore] changed geothermal, small fixes --------- Co-authored-by: Neha <[email protected]> * Added Project Item component * meep * fixed font issues kinda * minor fixes * Used neha's energy type icons * changed svg properties to camelCase --------- Co-authored-by: Monique <[email protected]> Co-authored-by: nehaahussain <[email protected]> Co-authored-by: Neha <[email protected]>

Neha added 8 commits November 6, 2024 14:33

[chore] added tags, files

7d96f25

[chore] file fixes

aef04cd

[chore] file fixes

d4bca9f

[feat] finished status tags

bf167b7

[feat] did tech tags

7befc19

[chore] rem

a9a8052

[feat] done?

c229d7e

[chore] small fixes

5934ca8

nehaahussain linked an issue Nov 8, 2024 that may be closed by this pull request

[feat] Customized Icons for Renewable Energy Technology and Status (incl. Proposed COD) #51

Closed

Neha and others added 4 commits November 10, 2024 17:53

[chore] name change, cod

39615ea

[feat] proposed styling

9001b68

[chore] refactoring

281a504

Merge branch 'main' into neha/51-feat-customized-icons-for-renewable-…

3322d89

…energy-technology-and-status-incl-proposed-cod

itsliterallymonique requested changes Nov 11, 2024

View reviewed changes

Neha added 2 commits November 11, 2024 12:20

[feat] fixed icons

05ad04f

Merge branch 'neha/51-feat-customized-icons-for-renewable-energy-tech…

f8d06c7

…nology-and-status-incl-proposed-cod' of https://github.com/calblueprint/ace-ny into neha/51-feat-customized-icons-for-renewable-energy-technology-and-status-incl-proposed-cod

itsliterallymonique approved these changes Nov 11, 2024

View reviewed changes

[chore] changed geothermal, small fixes

48d840e

nehaahussain merged commit 31d0654 into main Nov 11, 2024
2 checks passed

itsliterallymonique mentioned this pull request Nov 11, 2024

[feat] Direct Search Item Component #62

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[feat] Customized Icons for Renewable Energy Technology and Status (incl. Proposed COD) #63

[feat] Customized Icons for Renewable Energy Technology and Status (incl. Proposed COD) #63

nehaahussain commented Nov 8, 2024 •

edited

Loading

itsliterallymonique left a comment

itsliterallymonique Nov 11, 2024

itsliterallymonique Nov 11, 2024

itsliterallymonique Nov 11, 2024

itsliterallymonique Nov 11, 2024

itsliterallymonique Nov 11, 2024

itsliterallymonique Nov 11, 2024

itsliterallymonique Nov 11, 2024

itsliterallymonique Nov 11, 2024

itsliterallymonique Nov 11, 2024

itsliterallymonique left a comment

itsliterallymonique Nov 11, 2024

[feat] Customized Icons for Renewable Energy Technology and Status (incl. Proposed COD) #63

[feat] Customized Icons for Renewable Energy Technology and Status (incl. Proposed COD) #63

Conversation

nehaahussain commented Nov 8, 2024 • edited Loading

What's new in this PR

Description

Screenshots

How to review

Next steps

Relevant links

Online sources

Related PRs

itsliterallymonique left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

itsliterallymonique left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nehaahussain commented Nov 8, 2024 •

edited

Loading