feat(icons): new icons for the Portfolio page (#561)

yhabib · github-actions[bot] · web-flow · commit 5f1e908ec172 · 2025-01-20T12:44:31.000+01:00
# Motivation Three new icons for the nns-dapp portfolio page: - `UserLogin` icon - `HeldTokens` icon - `StakedTokens` icon # Changes - Exported icons from [figma](https://www.figma.com/design/3P3MBRLwECLuxN5b5iuWiA/NNS-Portfolio-Overview?node-id=111-77539&t=deMCSzrYqw1lOvRL-0) - Minimize them through [svgomg](https://svgomg.net/) # Screenshots ![Screenshot 2025-01-20 at 07 07 07](https://github.com/user-attachments/assets/0caab737-69fd-4d8c-9848-d8f62a5ba421) ![Screenshot 2025-01-20 at 07 07 21](https://github.com/user-attachments/assets/291d6516-ab99-431a-aff6-a61095b02462) ![Screenshot 2025-01-20 at 07 07 30](https://github.com/user-attachments/assets/a12a5f2d-bd79-4795-b613-4e2be919cd59) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
diff --git a/src/lib/icons.ts b/src/lib/icons.ts
@@ -29,6 +29,7 @@ export { default as IconExpandMore } from "./icons/IconExpandMore.svelte";
 export { default as IconExplore } from "./icons/IconExplore.svelte";
 export { default as IconFilter } from "./icons/IconFilter.svelte";
 export { default as IconGitHub } from "./icons/IconGitHub.svelte";
+export { default as IconHeldTokens } from "./icons/IconHeldTokens.svelte";
 export { default as IconHistoryToggleOff } from "./icons/IconHistoryToggleOff.svelte";
 export { default as IconHome } from "./icons/IconHome.svelte";
 export { default as IconInfo } from "./icons/IconInfo.svelte";
@@ -65,13 +66,15 @@ export { default as IconSort } from "./icons/IconSort.svelte";
 export { default as IconSouth } from "./icons/IconSouth.svelte";
 export { default as IconStackedLineChart } from "./icons/IconStackedLineChart.svelte";
 export { default as IconStakedMaturity } from "./icons/IconStakedMaturity.svelte";
+export { default as IconStakedTokens } from "./icons/IconStakedTokens.svelte";
 export { default as IconSubdirectory } from "./icons/IconSubdirectory.svelte";
 export { default as IconSync } from "./icons/IconSync.svelte";
 export { default as IconThumbDown } from "./icons/IconThumbDown.svelte";
 export { default as IconThumbUp } from "./icons/IconThumbUp.svelte";
 export { default as IconTokens } from "./icons/IconTokens.svelte";
 export { default as IconUp } from "./icons/IconUp.svelte";
 export { default as IconUser } from "./icons/IconUser.svelte";
+export { default as IconUserLogin } from "./icons/IconUserLogin.svelte";
 export { default as IconUsers } from "./icons/IconUsers.svelte";
 export { default as IconVote } from "./icons/IconVote.svelte";
 export { default as IconWallet } from "./icons/IconWallet.svelte";
diff --git a/src/lib/icons/IconHeldTokens.svelte b/src/lib/icons/IconHeldTokens.svelte
@@ -0,0 +1,136 @@
+<!-- source: DFINITY foundation -->
+<script lang="ts">
+  // Default to 100% size to make sure Safari renders the SVG correctly
+  export let size = "100%";
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  width={size}
+  height={size}
+  viewBox="0 0 144 144"
+  ><rect
+    width="106.783"
+    height="106.783"
+    x="39.088"
+    y="19.826"
+    fill="#436FF5"
+    opacity=".2"
+    rx="18.068"
+    transform="rotate(7 39.088 19.826)"
+  /><path
+    fill="url(#a)"
+    d="M43.97 42.033C19.51 48.766 5.142 74.05 11.875 98.51c6.733 24.458 32.018 38.828 56.477 32.095 24.458-6.733 38.828-32.018 32.095-56.477C93.714 49.669 68.428 35.3 43.97 42.033Z"
+  /><path
+    fill="url(#b)"
+    d="M62.804 129.811c25.477-3.854 43.006-27.632 39.152-53.11-3.854-25.477-27.632-43.006-53.109-39.152C23.37 41.403 5.841 65.181 9.695 90.66c3.854 25.477 27.631 43.006 53.109 39.152Z"
+  /><path
+    fill="url(#c)"
+    d="M61.982 124.383c20.981-3.174 35.417-22.756 32.243-43.737C91.052 59.665 71.47 45.23 50.49 48.403 29.507 51.577 15.072 71.159 18.245 92.14c3.174 20.981 22.756 35.417 43.737 32.243Z"
+    opacity=".2"
+  /><path
+    fill="url(#d)"
+    d="M61.572 121.67c20.98-3.174 35.417-22.756 32.243-43.737C90.64 56.952 71.059 42.516 50.078 45.69 29.097 48.864 14.66 68.445 17.835 89.427c3.174 20.981 22.755 35.417 43.737 32.243Z"
+  /><g filter="url(#e)"
+    ><path
+      fill="url(#f)"
+      fill-rule="evenodd"
+      d="M73.268 91.222c-3.595.326-7.605-1.68-9.623-3.218-2.206-1.682-8.355-7.247-8.382-7.273-4.043-3.765-9.392-7.865-14.317-7.419-5.932.537-10.733 5.113-11.587 10.678.071-.368 1.505-5.524 8.584-6.165a8.587 8.587 0 0 1 .002 0c-7.077.64-8.512 5.794-8.583 6.164-.146.948-.18 1.925-.09 2.917.62 6.858 6.783 11.925 13.837 11.286 2.94-.266 6.098-2.072 9.221-5.352 1.477-1.55 2.73-3.178 3.665-4.481 4.037 3.753 9.364 7.82 14.27 7.375 5.926-.536 10.724-5.103 11.585-10.66 0-.006.002-.011.003-.016.145-.948.18-1.925.09-2.918-.62-6.858-6.873-11.917-13.928-11.278-2.94.266-6.007 2.064-9.13 5.344-1.477 1.55-2.732 3.18-3.666 4.483l.044.041c.014.014 1.785 1.616 3.766 3.36.872-1.248 2.137-2.956 3.627-4.52 2.777-2.917 4.687-3.649 5.808-3.75 4.23-.383 7.984 2.66 8.358 6.783.37 4.1-2.772 7.765-7.004 8.174a3.24 3.24 0 0 1-.57-.005c1.316.373 2.696.57 4.02.45ZM41.397 78.27c.153-.014.34-.015.57.005 2.257.64 4.325 1.797 5.6 2.768 1.025.782 2.9 2.401 4.618 3.914-.871 1.248-2.136 2.956-3.626 4.52-2.777 2.917-4.687 3.649-5.808 3.75-4.23.383-7.985-2.66-8.358-6.783-.373-4.123 2.772-7.765 7.004-8.174Z"
+      clip-rule="evenodd"
+    /></g
+  ><path
+    fill="url(#g)"
+    fill-rule="evenodd"
+    d="M73.268 90.236c-3.596.326-7.605-1.68-9.624-3.219-2.206-1.681-8.355-7.247-8.382-7.272-4.042-3.765-9.391-7.865-14.316-7.42-5.932.538-10.734 5.114-11.587 10.678.07-.367 1.504-5.524 8.584-6.164a8.587 8.587 0 0 1 .002 0c-7.077.64-8.513 5.794-8.584 6.163-.145.948-.18 1.926-.09 2.918.621 6.858 6.783 11.925 13.837 11.286 2.941-.266 6.099-2.072 9.222-5.352 1.476-1.55 2.73-3.178 3.665-4.481 4.037 3.752 9.364 7.82 14.27 7.375 5.926-.536 10.723-5.104 11.584-10.66a12.046 12.046 0 0 0 .093-2.933c-.62-6.86-6.873-11.918-13.927-11.28-2.941.267-6.007 2.064-9.13 5.344-1.477 1.551-2.732 3.18-3.667 4.484l.044.04c.014.014 1.786 1.617 3.766 3.36.872-1.247 2.137-2.955 3.628-4.52 2.776-2.916 4.687-3.648 5.808-3.75 4.23-.382 7.984 2.66 8.357 6.784.371 4.1-2.772 7.764-7.004 8.173-.153.014-.34.015-.57-.004 1.316.373 2.696.57 4.02.45ZM41.396 77.284c.154-.014.34-.015.57.004 2.257.64 4.326 1.798 5.6 2.77 1.025.78 2.901 2.4 4.619 3.913-.872 1.248-2.137 2.955-3.627 4.52-2.776 2.917-4.687 3.648-5.808 3.75-4.23.383-7.984-2.66-8.357-6.783-.374-4.124 2.772-7.765 7.003-8.174Z"
+    clip-rule="evenodd"
+  /><defs
+    ><linearGradient
+      id="a"
+      x1="-26.846"
+      x2="115.774"
+      y1="31.097"
+      y2="124.305"
+      gradientUnits="userSpaceOnUse"
+      ><stop stop-color="#AFC3FF" stop-opacity=".7" /><stop
+        offset="1"
+        stop-color="#1851FF"
+      /></linearGradient
+    ><linearGradient
+      id="b"
+      x1="-35.904"
+      x2="121.449"
+      y1="40.842"
+      y2="112.765"
+      gradientUnits="userSpaceOnUse"
+      ><stop stop-color="#AFC3FF" stop-opacity="0" /><stop
+        offset="1"
+        stop-color="#1851FF"
+      /></linearGradient
+    ><linearGradient
+      id="c"
+      x1="72.845"
+      x2="105.666"
+      y1="44.966"
+      y2="136.02"
+      gradientUnits="userSpaceOnUse"
+      ><stop stop-color="#F9FFFC" /><stop
+        offset="1"
+        stop-color="#F7FBFF"
+      /></linearGradient
+    ><linearGradient
+      id="d"
+      x1="7.379"
+      x2="102.038"
+      y1="20.309"
+      y2="31.019"
+      gradientUnits="userSpaceOnUse"
+      ><stop stop-color="#C4D3FF" /><stop
+        offset="1"
+        stop-color="#003FFF"
+      /></linearGradient
+    ><linearGradient
+      id="f"
+      x1="67.172"
+      x2="79.871"
+      y1="66.713"
+      y2="101.548"
+      gradientUnits="userSpaceOnUse"
+      ><stop stop-color="#F9FFFC" /><stop
+        offset="1"
+        stop-color="#F7FBFF"
+      /></linearGradient
+    ><linearGradient
+      id="g"
+      x1="34.393"
+      x2="64.63"
+      y1="85.033"
+      y2="111.491"
+      gradientUnits="userSpaceOnUse"
+      ><stop stop-color="#F9FAFF" /><stop
+        offset="1"
+        stop-color="#D9E2FD"
+      /></linearGradient
+    ><filter
+      id="e"
+      width="61.09"
+      height="35.76"
+      x="25.063"
+      y="66.647"
+      color-interpolation-filters="sRGB"
+      filterUnits="userSpaceOnUse"
+      ><feFlood flood-opacity="0" result="BackgroundImageFix" /><feGaussianBlur
+        in="BackgroundImageFix"
+        stdDeviation="2.08"
+      /><feComposite
+        in2="SourceAlpha"
+        operator="in"
+        result="effect1_backgroundBlur_232_3178"
+      /><feBlend
+        in="SourceGraphic"
+        in2="effect1_backgroundBlur_232_3178"
+        result="shape"
+      /></filter
+    ></defs
+  ></svg
+>
diff --git a/src/lib/icons/IconStakedTokens.svelte b/src/lib/icons/IconStakedTokens.svelte
@@ -0,0 +1,155 @@
+<!-- source: DFINITY foundation -->
+<script lang="ts">
+  // Default to 100% size to make sure Safari renders the SVG correctly
+  export let size = "100%";
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  fill="none"
+  viewBox="0 0 154 150"
+  ><rect
+    width="102.698"
+    height="102.698"
+    x="47.354"
+    y="12.067"
+    fill="#436FF5"
+    opacity=".2"
+    rx="18.071"
+    transform="rotate(7 47.354 12.067)"
+  /><path
+    stroke="url(#paint0_linear_750_282)"
+    stroke-width="5"
+    d="m55.5 94-19 17.5"
+  /><path
+    fill="url(#paint1_linear_750_282)"
+    d="M100 126c6.627 0 12-5.373 12-12s-5.373-12-12-12-12 5.373-12 12 5.373 12 12 12Z"
+  /><path
+    fill="url(#paint2_linear_750_282)"
+    d="M89.983 109.487a2.5 2.5 0 1 0 3.034-3.974l-3.034 3.974Zm-19-14.5 19 14.5 3.034-3.974-19-14.5-3.034 3.974Z"
+  /><path
+    fill="url(#paint3_linear_750_282)"
+    d="M64 98c6.627 0 12-5.373 12-12s-5.373-12-12-12-12 5.373-12 12 5.373 12 12 12Z"
+  /><path
+    fill="url(#paint4_linear_750_282)"
+    d="M73.187 80.636a2.5 2.5 0 1 0 1.626 4.728l-1.626-4.728Zm1.626 4.728 16-5.5-1.626-4.728-16 5.5 1.626 4.728Z"
+  /><path
+    fill="url(#paint5_linear_750_282)"
+    d="M100 86c6.627 0 12-5.373 12-12s-5.373-12-12-12-12 5.373-12 12 5.373 12 12 12Z"
+  /><path
+    fill="url(#paint6_linear_750_282)"
+    d="M28 130c6.627 0 12-5.373 12-12s-5.373-12-12-12-12 5.373-12 12 5.373 12 12 12Z"
+  /><path
+    stroke="url(#paint7_linear_750_282)"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="5"
+    d="M51.5 57.5 60 76"
+  /><path
+    fill="url(#paint8_linear_750_282)"
+    d="M48 62c6.627 0 12-5.373 12-12s-5.373-12-12-12-12 5.373-12 12 5.373 12 12 12Z"
+  /><defs
+    ><linearGradient
+      id="paint0_linear_750_282"
+      x1="43"
+      x2="48.5"
+      y1="100"
+      y2="105.5"
+      gradientUnits="userSpaceOnUse"
+      ><stop stop-color="#C4D3FF" /><stop
+        offset="1"
+        stop-color="#003FFF"
+      /></linearGradient
+    ><linearGradient
+      id="paint1_linear_750_282"
+      x1="90"
+      x2="107"
+      y1="102"
+      y2="125.5"
+      gradientUnits="userSpaceOnUse"
+      ><stop stop-color="#C4D3FF" /><stop
+        offset="1"
+        stop-color="#003FFF"
+      /></linearGradient
+    ><linearGradient
+      id="paint2_linear_750_282"
+      x1="78.5"
+      x2="70.5"
+      y1="90"
+      y2="100"
+      gradientUnits="userSpaceOnUse"
+      ><stop stop-color="#C4D3FF" /><stop
+        offset="1"
+        stop-color="#003FFF"
+      /></linearGradient
+    ><linearGradient
+      id="paint3_linear_750_282"
+      x1="53.5"
+      x2="71.5"
+      y1="75.5"
+      y2="98"
+      gradientUnits="userSpaceOnUse"
+      ><stop stop-color="#C4D3FF" /><stop
+        offset="1"
+        stop-color="#003FFF"
+      /></linearGradient
+    ><linearGradient
+      id="paint4_linear_750_282"
+      x1="76.5"
+      x2="79"
+      y1="78"
+      y2="84.5"
+      gradientUnits="userSpaceOnUse"
+      ><stop stop-color="#C4D3FF" /><stop
+        offset="1"
+        stop-color="#003FFF"
+      /></linearGradient
+    ><linearGradient
+      id="paint5_linear_750_282"
+      x1="92.5"
+      x2="112"
+      y1="58"
+      y2="88.5"
+      gradientUnits="userSpaceOnUse"
+      ><stop stop-color="#C4D3FF" /><stop
+        offset="1"
+        stop-color="#003FFF"
+      /></linearGradient
+    ><linearGradient
+      id="paint6_linear_750_282"
+      x1="19.5"
+      x2="37"
+      y1="106"
+      y2="130"
+      gradientUnits="userSpaceOnUse"
+      ><stop stop-color="#C4D3FF" /><stop
+        offset="1"
+        stop-color="#003FFF"
+      /></linearGradient
+    ><linearGradient
+      id="paint7_linear_750_282"
+      x1="46.5"
+      x2="63"
+      y1="67"
+      y2="61"
+      gradientUnits="userSpaceOnUse"
+      ><stop stop-color="#C4D3FF" /><stop
+        offset="1"
+        stop-color="#003FFF"
+      /></linearGradient
+    ><linearGradient
+      id="paint8_linear_750_282"
+      x1="38"
+      x2="61.5"
+      y1="36.5"
+      y2="68"
+      gradientUnits="userSpaceOnUse"
+      ><stop stop-color="#C4D3FF" /><stop
+        offset="1"
+        stop-color="#003FFF"
+      /></linearGradient
+    ></defs
+  ></svg
+>
diff --git a/src/lib/icons/IconUserLogin.svelte b/src/lib/icons/IconUserLogin.svelte
@@ -0,0 +1,65 @@
+<!-- source: DFINITY foundation -->
+<script lang="ts">
+  // Default to 100% size to make sure Safari renders the SVG correctly
+  export let size = "100%";
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  fill="none"
+  viewBox="0 0 144 144"
+>
+  <rect
+    width="102.264"
+    height="102.264"
+    fill="#436FF5"
+    opacity=".2"
+    rx="18.06"
+    transform="rotate(7 -89.042 288.23)"
+  /><path
+    fill="url(#paint0_linear_748_151)"
+    stroke="url(#paint1_linear_748_151)"
+    stroke-width="5"
+    d="M40.043 27.767c-11.68 1.49-19.74 12.752-18.396 24.86C22.994 64.76 33.343 73.73 45.062 72.233c11.679-1.49 19.74-12.752 18.395-24.86C62.11 35.24 51.761 26.27 40.043 27.767Z"
+  /><path
+    fill="url(#paint2_linear_748_151)"
+    d="M61 82H27C15 82 9 89 9 99v17c0 12 17 18 35 18s33-6.5 33-18V99c0-10-6-17-16-17Z"
+  /><defs
+    ><linearGradient
+      id="paint0_linear_748_151"
+      x1="24"
+      x2="68.813"
+      y1="13.804"
+      y2="25.046"
+      gradientUnits="userSpaceOnUse"
+      ><stop stop-color="#C4D3FF" /><stop
+        offset="1"
+        stop-color="#003FFF"
+      /></linearGradient
+    ><linearGradient
+      id="paint1_linear_748_151"
+      x1="8.982"
+      x2="74.099"
+      y1="9.737"
+      y2="75.778"
+      gradientUnits="userSpaceOnUse"
+      ><stop stop-color="#AFC3FF" stop-opacity="0" /><stop
+        offset="1"
+        stop-color="#1851FF"
+      /></linearGradient
+    ><linearGradient
+      id="paint2_linear_748_151"
+      x1="9"
+      x2="73.5"
+      y1="78"
+      y2="140"
+      gradientUnits="userSpaceOnUse"
+      ><stop stop-color="#C4D3FF" /><stop
+        offset="1"
+        stop-color="#003FFF"
+      /></linearGradient
+    ></defs
+  ></svg
+>
