feat: implement logic for icons
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { iconVariants } from "./variants"
|
||||
|
||||
import type { IconProps } from "@/types/components/icon"
|
||||
import { IconProps } from "@/types/components/icon"
|
||||
|
||||
export default function CalendarIcon({
|
||||
className,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { iconVariants } from "./variants"
|
||||
|
||||
import type { IconProps } from "@/types/components/icon"
|
||||
import { IconProps } from "@/types/components/icon"
|
||||
|
||||
export default function CheckCircleIcon({
|
||||
className,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { iconVariants } from "./variants"
|
||||
|
||||
import type { IconProps } from "@/types/components/icon"
|
||||
import { IconProps } from "@/types/components/icon"
|
||||
|
||||
export default function ChevronDownIcon({
|
||||
className,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { iconVariants } from "./variants"
|
||||
|
||||
import type { IconProps } from "@/types/components/icon"
|
||||
import { IconProps } from "@/types/components/icon"
|
||||
|
||||
export default function EmailIcon({ className, color, ...props }: IconProps) {
|
||||
const classNames = iconVariants({ className, color })
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { iconVariants } from "./variants"
|
||||
|
||||
import type { IconProps } from "@/types/components/icon"
|
||||
import { IconProps } from "@/types/components/icon"
|
||||
|
||||
export default function HouseIcon({ className, color, ...props }: IconProps) {
|
||||
const classNames = iconVariants({ className, color })
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { iconVariants } from "./variants"
|
||||
|
||||
import type { IconProps } from "@/types/components/icon"
|
||||
import { IconProps } from "@/types/components/icon"
|
||||
|
||||
export default function PhoneIcon({ className, color, ...props }: IconProps) {
|
||||
const classNames = iconVariants({ className, color })
|
||||
|
||||
@@ -2,27 +2,22 @@
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.black,
|
||||
.black * {
|
||||
fill: #000;
|
||||
}
|
||||
|
||||
.burgundy,
|
||||
.burgundy * {
|
||||
fill: var(--Scandic-Brand-Burgundy);
|
||||
}
|
||||
|
||||
.pale,
|
||||
.pale * {
|
||||
fill: var(--Scandic-Brand-Pale-Peach);
|
||||
}
|
||||
|
||||
.peach80,
|
||||
.peach80 * {
|
||||
fill: var(--Scandic-Peach-80);
|
||||
}
|
||||
|
||||
.plosa,
|
||||
.plosa * {
|
||||
fill: var(--Theme-Primary-Light-On-Surface-Accent);
|
||||
|
||||
@@ -30,7 +30,7 @@ export default function Shortcuts({
|
||||
variant="shortcut"
|
||||
>
|
||||
<span>{shortcut.text ? shortcut.text : shortcut.title}</span>
|
||||
<ArrowRightIcon />
|
||||
<ArrowRightIcon color="burgundy" className={styles.arrowRight} />
|
||||
</Link>
|
||||
))}
|
||||
</section>
|
||||
|
||||
@@ -28,3 +28,8 @@
|
||||
.link:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.arrowRight {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user