+ With the beat property gives you a basic beat animation.
+
+ With the fade property gives you a basic fade animation.
+
+ With the fade property gives you a basic fade animation.
+
+ With the flip property you can mirror your icon on its x-axis, y-axis or both.
+
Get started with Valkyrie by running the following command in your project.
+Next, import the style for Valkyrie into your project's CSS file.
+
+ Now you can use the Valkyrie component wherever you like.
+
+ With the rotate property you can change the default rotation of your icon. You can pass any numeric
+ degree value for full flexibility.
+
1s when using pulse.
+
+ ),
+ },
+ {
+ name: "--vi-animation-timing-function",
+ default: "linear",
+ description: "The timing function used for the animation.",
+ },
+ {
+ name: "--vi-animation-iteration-count",
+ default: "infinite",
+ description: "Number of times the animation is repeated.",
+ },
+ {
+ name: "--vi-animation-pulse-steps",
+ default: 8,
+ description: (
+ <>
+ Number of steps when the spin property is set to pulse.
+
+ ),
+ },
+ ],
+ };
+
+ return (
+
+ With the spin property you can make your icons play a rotation animation.
+
+ When setting the property to pulse, some additional variables are avvilable while some defaults are
+ changed.
+
+ {date} · Version {version} +
+{icon.old}{" "}
+ {icon.new}
+ {icon}
+ {parseMarkdownCode(item)}
+{match[1]});
+ lastIndex = regex.lastIndex;
+ }
+
+ // Add remaining text
+ if (lastIndex < text.length) {
+ parts.push(text.slice(lastIndex));
+ }
+
+ return parts.length === 1 ? parts[0] : parts;
+}
diff --git a/docs/src/app/Docs/playground/ApiTable.tsx b/docs/src/app/Docs/playground/ApiTable.tsx
new file mode 100644
index 000000000..4f9a3d28b
--- /dev/null
+++ b/docs/src/app/Docs/playground/ApiTable.tsx
@@ -0,0 +1,42 @@
+import Code from "@/design/components/Code";
+
+import { type IIconCssVariables } from "./Playground";
+
+interface IApiTableProps {
+ cssVariables: IIconCssVariables[];
+}
+
+export default function ApiTable({ cssVariables }: IApiTableProps) {
+ return (
+ | + Property name + | ++ Default + | ++ Description + | +
|---|---|---|
+ {variable.name}
+ |
+
+ {variable.default}
+ |
+ {variable.description} | +
The page you're trying to reach cannot be found.
+Created
{" "} +Last updated
{" "} +Bounce
+Spin
+Pulse
+90°
+180°
+270°
+Beat
+Flip
+X
+Y
+
+ {children}
+
+ );
+}
diff --git a/docs/src/design/components/IconCard.tsx b/docs/src/design/components/IconCard.tsx
new file mode 100644
index 000000000..65540cf2a
--- /dev/null
+++ b/docs/src/design/components/IconCard.tsx
@@ -0,0 +1,17 @@
+import { NavLink } from "react-router";
+
+import Valkyrie from "@sippy-platform/valkyrie";
+
+import { type ILibraryIcon } from "@/types";
+
+export function IconCard({ icon }: { icon: ILibraryIcon }) {
+ return (
+
+ Valkyrie is a set of SVG icons made with
© 2021-2026
+