AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: add icon components via svgr/cli

Browse Source
This commit is contained in:
Mathias Schopmans
2024-02-12 16:16:27 +01:00
committed by Mathias Schopmans
parent 40549cdb80
commit 8b44da35ab
15 changed files with 41 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Navigation/Navigation.module.css
View File

@@ -4,3 +4,10 @@
gap: 16px;
font-size: 14px;
}
.icon {
display: inline-block;
vertical-align: middle;
width: 22px;
margin: 0 10px 0 0;
}

20
src/components/Navigation/Navigation.tsx
View File

@@ -2,6 +2,10 @@ import Link from "next/link";
import styles from "./Navigation.module.css";
import IconFilter from "@/components/Icons/Filter";
import IconOverview from "@/components/Icons/Overview";
import IconQuestion from "@/components/Icons/Question";
import IconSearch from "@/components/Icons/Search";
import { getAppName } from "@/lib/config";
export function Navigation() {
@@ -10,14 +14,24 @@ export function Navigation() {
<ul className={styles.list}>
<li className={styles.item}>
<Link href="/help-and-about-tech-radar">
<IconQuestion className={styles.icon} />
How to use {getAppName()}?
</Link>
</li>
<li className={styles.item}>Filter</li>
<li className={styles.item}>
<Link href="/overview">Technologies Overview</Link>
<IconFilter className={styles.icon} />
Filter
</li>
<li className={styles.item}>
<Link href="/overview">
<IconOverview className={styles.icon} />
Technologies Overview
</Link>
</li>
<li className={styles.item}>
<IconSearch className={styles.icon} />
Search
</li>
<li className={styles.item}>Search</li>
</ul>
</nav>
);

4
src/icons/back.svg
View File

@@ -1,3 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"
viewBox="0 0 30 21"><path d="M4.012 11.427h24.704a1.134 1.134 0 0 0 0-2.267H3.729l7.224-7.225A1.133 1.133 0 1 0 9.35.332L.332 9.35a1.134 1.134 0 0 0-.106 1.481c.099.182.245.335.423.439l8.701 8.701a1.133 1.133 0 1 0 1.603-1.603l-6.941-6.941Z" style="fill:#fff"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421" viewBox="0 0 30 21"><path d="M4.012 11.427h24.704a1.134 1.134 0 0 0 0-2.267H3.729l7.224-7.225A1.133 1.133 0 1 0 9.35.332L.332 9.35a1.134 1.134 0 0 0-.106 1.481c.099.182.245.335.423.439l8.701 8.701a1.133 1.133 0 1 0 1.603-1.603l-6.941-6.941Z" style="fill:#fff"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 424 B

After

Width:  |  Height:  |  Size: 420 B

1
src/icons/blip_changed.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect width="12" height="12" x="2" y="2" fill="#FFF" rx="3" transform="rotate(-45 8 8)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 155 B

1
src/icons/blip_default.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" fill="#FFF"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 107 B

1
src/icons/blip_new.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg"><path fill="#FFF" d="m.247 10.212 5.02-8.697a2 2 0 0 1 3.465 0l5.021 8.697a2 2 0 0 1-1.732 3H1.98a2 2 0 0 1-1.732-3z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 165 B

1
src/icons/close.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421" viewBox="0 0 22 22"><path d="m18.703 1.405-7.675 7.732-7.674-7.732c-.54-.54-1.405-.54-1.892 0-.54.541-.54 1.406 0 1.892l7.675 7.731-7.732 7.675c-.54.54-.54 1.405 0 1.892.541.54 1.406.54 1.892 0l7.731-7.675 7.675 7.675c.54.54 1.405.54 1.892 0 .487-.541.54-1.405 0-1.892l-7.675-7.675 7.675-7.674c.54-.54.54-1.405 0-1.892-.484-.54-1.352-.54-1.892-.057Z" style="fill:#029df7"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 532 B

1
src/icons/filter.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 1000 1000"><path fill="#029DF7" d="M981.4 50.7c-15.5-29.2-39.5-43-72.2-43H87.4c-43 0-72.2 25.8-77.4 67.1 0 3.4 1.7 10.3 3.4 12C121.8 210.6 230.1 331 340.1 453c5.2 5.2 6.9 10.3 6.9 18.9v338.7c0 49.9 24.1 87.7 68.8 110 30.9 15.5 63.6 25.8 94.6 39.5 25.8 10.3 49.9 20.6 75.6 29.2 25.8 8.6 49.9-3.4 58.5-25.8 3.4-8.6 5.2-20.6 5.2-30.9V473.5c0-6.9 1.7-12 6.9-17.2 39.5-44.7 80.8-89.4 120.4-134.1 68.8-77.4 139.3-154.7 208-232.1 1.7-1.7 5.2-6.9 5.2-10.3-3.6-10.2-3.6-20.5-8.8-29.1zM878.2 95.4C792.3 190 708 284.6 622.1 379.1c-1.7 1.7-22.4 22.4-48.1 46.4v476.2c-3.4-1.7-6.9-1.7-8.6-3.4-36.1-13.8-72.2-29.2-108.3-43-22.4-8.6-32.7-25.8-32.7-49.9V425.5c-24.1-24.1-44.7-43-46.4-44.7-89.4-96.3-175.4-194.3-263.1-290.6-1.7-1.7-3.4-3.4-5.2-6.9h778.8c-5.1 5.3-6.8 8.7-10.3 12.1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 846 B

1
src/icons/overview.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="21"><path fill="#029DF7" fill-rule="evenodd" d="M2.667 0C1.215 0 0 1.215 0 2.667v15.11A2.232 2.232 0 0 0 2.222 20h13.111c.35 0 .667-.317.667-.667V4.667c-.002-.391-.286-.67-.667-.667C14.693 4 14 3.308 14 2.667s.692-1.334 1.333-1.334c.352.005.667-.314.667-.666 0-.352-.315-.672-.667-.667H2.667Zm0 1.333h10.368c-.233.395-.368.851-.368 1.334 0 .482.135.938.368 1.333H2.667c-.642 0-1.334-.692-1.334-1.333s.692-1.334 1.334-1.334ZM1.333 4.965c.394.233.852.368 1.334.368h12v13.334H2.222a.873.873 0 0 1-.889-.89V4.966Zm2.445 2.813a.667.667 0 0 0 0 1.333h8.444a.667.667 0 0 0 0-1.333H3.778Zm0 3.555a.667.667 0 0 0 0 1.334h8.444a.667.667 0 0 0 0-1.334H3.778Zm0 3.556a.667.667 0 0 0 0 1.333h8.444a.667.667 0 0 0 0-1.333H3.778Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 782 B

1
src/icons/pie.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"><path fill="#029DF7" fill-rule="evenodd" d="M9.332 0h-.644v2.607C3.843 2.941 0 6.977 0 11.907c0 5.145 4.186 9.331 9.332 9.331 4.927 0 8.965-3.843 9.297-8.688h2.607v-.644C21.236 5.341 15.896 0 9.332 0Zm0 19.95c-4.437 0-8.045-3.608-8.045-8.045 0-4.219 3.263-7.69 7.4-8.019v8.663h8.663c-.33 4.135-3.798 7.4-8.018 7.4Zm9.33-8.688H9.976V1.306c5.343.321 9.633 4.613 9.954 9.956h-1.268Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 451 B

1
src/icons/question.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23"><g fill="none" fill-rule="evenodd"><path stroke="#029DF7" stroke-width="1.5" d="M11.762 1.525A10.223 10.223 0 0 0 1.525 11.762 10.223 10.223 0 0 0 11.762 22 10.223 10.223 0 0 0 22 11.762 10.223 10.223 0 0 0 11.762 1.525Z"/><path fill="#029DF7" d="M11.762 17.45a1.224 1.224 0 0 1-1.228-1.229c0-.682.546-1.229 1.228-1.229.683 0 1.23.547 1.23 1.23 0 .682-.547 1.228-1.23 1.228Zm2.775-6.916a5.038 5.038 0 0 1-.455.524c-.113.113-.25.227-.41.41a3.808 3.808 0 0 0-.432.432 3.516 3.516 0 0 0-.296.319 1.485 1.485 0 0 0-.273.978v.706h-1.775v-.956a2.018 2.018 0 0 1 .16-.955c.182-.296.385-.568.66-.818l1.137-1.138c.25-.272.363-.614.363-.979a1.34 1.34 0 0 0-.386-.955 1.394 1.394 0 0 0-.979-.386 1.373 1.373 0 0 0-1 .364c-.273.25-.433.614-.456.979H8.484a3.222 3.222 0 0 1 1.092-2.184 3.492 3.492 0 0 1 2.344-.796 3.317 3.317 0 0 1 2.275.75c.591.5.887 1.23.887 2.14-.02.563-.203 1.132-.545 1.565Z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 960 B

1
src/icons/search.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path fill="#029DF7" fill-rule="evenodd" d="m19.602 17.679-4.014-4.013c2.445-3.368 2.151-8.107-.886-11.143A8.585 8.585 0 0 0 8.612 0a8.585 8.585 0 0 0-6.09 2.523 8.613 8.613 0 0 0 0 12.181 8.587 8.587 0 0 0 6.09 2.523c1.776 0 3.55-.546 5.053-1.638l4.013 4.013c.265.265.613.398.962.398a1.36 1.36 0 0 0 .962-2.322ZM3.869 13.357a6.717 6.717 0 0 1 0-9.489 6.665 6.665 0 0 1 4.744-1.965c1.792 0 3.477.698 4.744 1.965a6.717 6.717 0 0 1 0 9.489 6.667 6.667 0 0 1-4.744 1.965 6.664 6.664 0 0 1-4.744-1.965Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 570 B