line-md 2.0.8 → 3.0.1

package/README.md

@@ -4,7 +4,7 @@ There are many icon sets that are designed to Material Design guidelines. You ca
 
 This icon set is different:
 
--   Icons are animated using SVG animations. No CSS or JavaScript.
+-   Icons are animated without JavaScript.
 -   It follows guidelines that are used for 'Round' and 'TwoTone' icons in the official Material Design Icons set.
 -   Sometimes 1px thin lines are used where it makes sense.
 
@@ -16,20 +16,101 @@ Click any icon to get code you can use in your project.
 
 If you like this icon set, but it is missing icons that you need, [please open an issue at repository](https://github.com/cyberalien/line-md/issues).
 
-## SVG animations level 2
+## Icon types
 
-Icons use [SVG animations](https://svgwg.org/specs/animations/), which are contained in icon code and do not require external stylesheet or script.
+There are several directories with different variations of the same icons:
+
+-   `svg-static` contains staic icons without animations.
+-   `svg` contains icons animated with [SVG animations](https://svgwg.org/specs/animations/) spec.
+-   `svg-style` contains icons that use CSS animations, CSS is embedded using `<style>` tag.
+-   `css-json` contains icons that use CSS animations, but CSS is separate from SVG. These files are for developers, so you can render final icons yourself.
+
+### SVG animations level 2
+
+Icons in `svg` directory use [SVG animations](https://svgwg.org/specs/animations/), which are contained in icon code and do not require external stylesheet or script.
 
 No, these are not outdated SMIL animations. Icons are animated using modern SVG spec, supported by all browsers.
 
+### CSS animations
+
+Icons in `svg-style` and `css-json` directories rely on CSS to animate icons.
+
+These are superior to SVG animations because:
+
+-   CSS animations are faster, use less resources.
+-   Icons are compact because CSS can be moved to a `.css` file and cached in browser, also avoiding content duplication.
+-   CSS animations have predictable timing. Show icon and animation starts. Change display mode in CSS to show/hide icon. With SVG animations level 2 spec, display has no effect, so triggering animation is not always trivial.
+
+However, there is one downside - browser support.
+
+This section has been written at the end of 2025.
+
+By the end of 2025, SVG+CSS cannot be used in production because of Safari browser.
+
+Safari browser does not support `path()` CSS function for `d` attribute, but Safari Technology Preview does support it, so hopefully sometime in 2026 Safari finally joins the rest of modern browsers and SVG+CSS will be usable in production.
+
+### CSS animations as JSON
+
+Files in `css-json` directory are in JSON format with the following properties:
+
+-   `content` contains SVG content, as string.
+-   `viewBox` contains icon viewBox attribute value, as object.
+-   `classes` contains list of used CSS classes, where key is class name, value is an object (see below).
+-   `keyframes` contains list of used animations, where key is an animation name, value is CSS.
+
+Classes property is an object, with the following keys (all keys are optional):
+
+-   `rules` contains rules as string.
+-   `animation` contains rules for animations, as string. It is separate from `rules`, so you can wrap it in `@media not (prefers-reduced-motion)` if needed to make sure icons are not animated for users that prefer non-animated icons.
+
+Exact TypeScript type used in generator for exporting these JSON files:
+
+```ts
+interface CSSJSONExport {
+	// SVG content
+	content: string;
+
+	// viewBox
+	viewBox: IconViewBox;
+
+	// Classes, key is class name
+	classes: Record<string, CSSJSONExportRules>;
+
+	// Used keyframes, key is animation name
+	keyframes?: Record<string, string>;
+}
+
+interface CSSJSONExportRules {
+	// Basic rules, excluding animations
+	rules: string;
+
+	// Rules used by animations
+	animation?: string;
+}
+
+// From @cyberalien/svg-utils/lib/svg/viewbox/types.js
+interface IconViewBox {
+	left?: number;
+	top?: number;
+	width: number;
+	height: number;
+	cx?: number;
+}
+```
+
+Class names and animation names are generated by hashing content, so possible class name collisions are resolved at build time.
+
+Rules are minified, however, each string ends with either "}" or ";" to make sure strings are easy to join if needed.
+
 ## Animation types
 
 Most icons use "fade-in" animation. Animation shows icon appearing from nothing.
 
 Other icons:
-- Icons that end with `-loop` use infinite animtions.
-- Icons that end with `-out` disappear icon. It is the opposite of same icon without `-out` suffix.
-- Icons that end with `-transition` transition between two icons.
+
+-   Icons that end with `-loop` use infinite animtions.
+-   Icons that end with `-out` disappear icon. It is the opposite of same icon without `-out` suffix.
+-   Icons that end with `-transition` transition between two icons.
 
 ## Usage in HTML
 

package/css-json/account-add.json

@@ -0,0 +1,46 @@
+{
+  "content": "<path class=\"a0m25c ejk6mg l5bica\"/><path class=\"a0m25c rsldly tufc9m\"/><path class=\"a0m25c tgs9dx u-k6bs\"/><path class=\"a0m25c svm8-t wwvkrl\"/>",
+  "viewBox": {
+    "left": 0,
+    "top": 0,
+    "width": 24,
+    "height": 24
+  },
+  "classes": {
+    "l5bica": {
+      "rules": "",
+      "animation": "stroke-dasharray:22;animation:0.3s linear forwards so-from-22;"
+    },
+    "ejk6mg": {
+      "rules": "d:path('M3 21v-1c0 -2.21 1.79 -4 4 -4h4c2.21 0 4 1.79 4 4v1');"
+    },
+    "rsldly": {
+      "rules": "",
+      "animation": "stroke-dasharray:22;stroke-dashoffset:22;animation:0.3s linear 0.3s forwards so-to-0;"
+    },
+    "tufc9m": {
+      "rules": "d:path('M9 13c-1.66 0 -3 -1.34 -3 -3c0 -1.66 1.34 -3 3 -3c1.66 0 3 1.34 3 3c0 1.66 -1.34 3 -3 3Z');"
+    },
+    "tgs9dx": {
+      "rules": "",
+      "animation": "stroke-dasharray:8;stroke-dashoffset:8;animation:0.2s linear 0.7s forwards so-to-0;"
+    },
+    "u-k6bs": {
+      "rules": "d:path('M15 6h6');"
+    },
+    "svm8-t": {
+      "rules": "",
+      "animation": "stroke-dasharray:8;stroke-dashoffset:8;animation:0.2s linear 0.9s forwards so-to-0;"
+    },
+    "wwvkrl": {
+      "rules": "d:path('M18 3v6');"
+    },
+    "a0m25c": {
+      "rules": "stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;stroke-width:2px;fill:none;"
+    }
+  },
+  "keyframes": {
+    "so-from-22": "@keyframes so-from-22{0%{stroke-dashoffset:22}}",
+    "so-to-0": "@keyframes so-to-0{100%{stroke-dashoffset:0}}"
+  }
+}

package/css-json/account-alert-loop.json

@@ -0,0 +1,47 @@
+{
+  "content": "<path class=\"a0m25c l5bica n9vv7r\"/><path class=\"a0m25c c0_d_l rsldly\"/><path class=\"a0m25c j1379g r30_3x\"/><path class=\"a0m25c j8cojr lvmiks\"/>",
+  "viewBox": {
+    "left": 0,
+    "top": 0,
+    "width": 24,
+    "height": 24
+  },
+  "classes": {
+    "l5bica": {
+      "rules": "",
+      "animation": "stroke-dasharray:22;animation:0.3s linear forwards so-from-22;"
+    },
+    "n9vv7r": {
+      "rules": "d:path('M5 21v-1c0 -2.21 1.79 -4 4 -4h4c2.21 0 4 1.79 4 4v1');"
+    },
+    "rsldly": {
+      "rules": "",
+      "animation": "stroke-dasharray:22;stroke-dashoffset:22;animation:0.3s linear 0.3s forwards so-to-0;"
+    },
+    "c0_d_l": {
+      "rules": "d:path('M11 13c-1.66 0 -3 -1.34 -3 -3c0 -1.66 1.34 -3 3 -3c1.66 0 3 1.34 3 3c0 1.66 -1.34 3 -3 3Z');"
+    },
+    "r30_3x": {
+      "rules": "",
+      "animation": "stroke-dasharray:6;stroke-dashoffset:6;animation:0.2s linear 0.7s forwards so-to-0, 3s linear 0.9s infinite sw-cnj-zb;"
+    },
+    "j1379g": {
+      "rules": "d:path('M20 3v4');"
+    },
+    "j8cojr": {
+      "rules": "",
+      "animation": "stroke-dasharray:4;stroke-dashoffset:4;animation:0.2s linear 0.9s forwards so-to-0, 3s linear 1.2s infinite sw-cnj-zb;"
+    },
+    "lvmiks": {
+      "rules": "d:path('M20 11v0.01');"
+    },
+    "a0m25c": {
+      "rules": "stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;stroke-width:2px;fill:none;"
+    }
+  },
+  "keyframes": {
+    "so-from-22": "@keyframes so-from-22{0%{stroke-dashoffset:22}}",
+    "so-to-0": "@keyframes so-to-0{100%{stroke-dashoffset:0}}",
+    "sw-cnj-zb": "@keyframes sw-cnj-zb{10%, 20%{stroke-width:3px}30%{stroke-width:2px}}"
+  }
+}

package/css-json/account-alert.json

@@ -0,0 +1,46 @@
+{
+  "content": "<path class=\"a0m25c l5bica n9vv7r\"/><path class=\"a0m25c c0_d_l rsldly\"/><path class=\"a0m25c j1379g k4k6fe\"/><path class=\"a0m25c e6cmxg lvmiks\"/>",
+  "viewBox": {
+    "left": 0,
+    "top": 0,
+    "width": 24,
+    "height": 24
+  },
+  "classes": {
+    "l5bica": {
+      "rules": "",
+      "animation": "stroke-dasharray:22;animation:0.3s linear forwards so-from-22;"
+    },
+    "n9vv7r": {
+      "rules": "d:path('M5 21v-1c0 -2.21 1.79 -4 4 -4h4c2.21 0 4 1.79 4 4v1');"
+    },
+    "rsldly": {
+      "rules": "",
+      "animation": "stroke-dasharray:22;stroke-dashoffset:22;animation:0.3s linear 0.3s forwards so-to-0;"
+    },
+    "c0_d_l": {
+      "rules": "d:path('M11 13c-1.66 0 -3 -1.34 -3 -3c0 -1.66 1.34 -3 3 -3c1.66 0 3 1.34 3 3c0 1.66 -1.34 3 -3 3Z');"
+    },
+    "k4k6fe": {
+      "rules": "",
+      "animation": "stroke-dasharray:6;stroke-dashoffset:6;animation:0.2s linear 0.7s forwards so-to-0;"
+    },
+    "j1379g": {
+      "rules": "d:path('M20 3v4');"
+    },
+    "e6cmxg": {
+      "rules": "",
+      "animation": "stroke-dasharray:4;stroke-dashoffset:4;animation:0.2s linear 0.9s forwards so-to-0;"
+    },
+    "lvmiks": {
+      "rules": "d:path('M20 11v0.01');"
+    },
+    "a0m25c": {
+      "rules": "stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;stroke-width:2px;fill:none;"
+    }
+  },
+  "keyframes": {
+    "so-from-22": "@keyframes so-from-22{0%{stroke-dashoffset:22}}",
+    "so-to-0": "@keyframes so-to-0{100%{stroke-dashoffset:0}}"
+  }
+}

package/css-json/account-delete.json

@@ -0,0 +1,46 @@
+{
+  "content": "<path class=\"a0m25c ejk6mg l5bica\"/><path class=\"a0m25c rsldly tufc9m\"/><path class=\"a0m25c j5x6ga ol-bzc\"/><path class=\"a0m25c dqsnfz ypomox\"/>",
+  "viewBox": {
+    "left": 0,
+    "top": 0,
+    "width": 24,
+    "height": 24
+  },
+  "classes": {
+    "l5bica": {
+      "rules": "",
+      "animation": "stroke-dasharray:22;animation:0.3s linear forwards so-from-22;"
+    },
+    "ejk6mg": {
+      "rules": "d:path('M3 21v-1c0 -2.21 1.79 -4 4 -4h4c2.21 0 4 1.79 4 4v1');"
+    },
+    "rsldly": {
+      "rules": "",
+      "animation": "stroke-dasharray:22;stroke-dashoffset:22;animation:0.3s linear 0.3s forwards so-to-0;"
+    },
+    "tufc9m": {
+      "rules": "d:path('M9 13c-1.66 0 -3 -1.34 -3 -3c0 -1.66 1.34 -3 3 -3c1.66 0 3 1.34 3 3c0 1.66 -1.34 3 -3 3Z');"
+    },
+    "j5x6ga": {
+      "rules": "",
+      "animation": "stroke-dasharray:12;stroke-dashoffset:12;animation:0.2s linear 0.7s forwards so-to-0;"
+    },
+    "ol-bzc": {
+      "rules": "d:path('M15 3l6 6');"
+    },
+    "dqsnfz": {
+      "rules": "",
+      "animation": "stroke-dasharray:12;stroke-dashoffset:12;animation:0.2s linear 0.9s forwards so-to-0;"
+    },
+    "ypomox": {
+      "rules": "d:path('M21 3l-6 6');"
+    },
+    "a0m25c": {
+      "rules": "stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;stroke-width:2px;fill:none;"
+    }
+  },
+  "keyframes": {
+    "so-from-22": "@keyframes so-from-22{0%{stroke-dashoffset:22}}",
+    "so-to-0": "@keyframes so-to-0{100%{stroke-dashoffset:0}}"
+  }
+}

package/css-json/account-remove.json

@@ -0,0 +1,39 @@
+{
+  "content": "<path class=\"a0m25c ejk6mg l5bica\"/><path class=\"a0m25c rsldly tufc9m\"/><path class=\"a0m25c tgs9dx u-k6bs\"/>",
+  "viewBox": {
+    "left": 0,
+    "top": 0,
+    "width": 24,
+    "height": 24
+  },
+  "classes": {
+    "l5bica": {
+      "rules": "",
+      "animation": "stroke-dasharray:22;animation:0.3s linear forwards so-from-22;"
+    },
+    "ejk6mg": {
+      "rules": "d:path('M3 21v-1c0 -2.21 1.79 -4 4 -4h4c2.21 0 4 1.79 4 4v1');"
+    },
+    "rsldly": {
+      "rules": "",
+      "animation": "stroke-dasharray:22;stroke-dashoffset:22;animation:0.3s linear 0.3s forwards so-to-0;"
+    },
+    "tufc9m": {
+      "rules": "d:path('M9 13c-1.66 0 -3 -1.34 -3 -3c0 -1.66 1.34 -3 3 -3c1.66 0 3 1.34 3 3c0 1.66 -1.34 3 -3 3Z');"
+    },
+    "tgs9dx": {
+      "rules": "",
+      "animation": "stroke-dasharray:8;stroke-dashoffset:8;animation:0.2s linear 0.7s forwards so-to-0;"
+    },
+    "u-k6bs": {
+      "rules": "d:path('M15 6h6');"
+    },
+    "a0m25c": {
+      "rules": "stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;stroke-width:2px;fill:none;"
+    }
+  },
+  "keyframes": {
+    "so-from-22": "@keyframes so-from-22{0%{stroke-dashoffset:22}}",
+    "so-to-0": "@keyframes so-to-0{100%{stroke-dashoffset:0}}"
+  }
+}

package/css-json/account-small.json

@@ -0,0 +1,32 @@
+{
+  "content": "<path class=\"a0m25c i4_pka l5bica\"/><path class=\"a0m25c rsldly zulf0v\"/>",
+  "viewBox": {
+    "left": 0,
+    "top": 0,
+    "width": 24,
+    "height": 24
+  },
+  "classes": {
+    "l5bica": {
+      "rules": "",
+      "animation": "stroke-dasharray:22;animation:0.3s linear forwards so-from-22;"
+    },
+    "i4_pka": {
+      "rules": "d:path('M6 19v-1c0 -2.21 1.79 -4 4 -4h4c2.21 0 4 1.79 4 4v1');"
+    },
+    "rsldly": {
+      "rules": "",
+      "animation": "stroke-dasharray:22;stroke-dashoffset:22;animation:0.3s linear 0.3s forwards so-to-0;"
+    },
+    "zulf0v": {
+      "rules": "d:path('M12 11c-1.66 0 -3 -1.34 -3 -3c0 -1.66 1.34 -3 3 -3c1.66 0 3 1.34 3 3c0 1.66 -1.34 3 -3 3Z');"
+    },
+    "a0m25c": {
+      "rules": "stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;stroke-width:2px;fill:none;"
+    }
+  },
+  "keyframes": {
+    "so-from-22": "@keyframes so-from-22{0%{stroke-dashoffset:22}}",
+    "so-to-0": "@keyframes so-to-0{100%{stroke-dashoffset:0}}"
+  }
+}

package/css-json/account.json

@@ -0,0 +1,32 @@
+{
+  "content": "<path class=\"a0m25c sgbqwh vu2phh\"/><path class=\"a0m25c ko2cgq yc6i9w\"/>",
+  "viewBox": {
+    "left": 0,
+    "top": 0,
+    "width": 24,
+    "height": 24
+  },
+  "classes": {
+    "vu2phh": {
+      "rules": "",
+      "animation": "stroke-dasharray:28;animation:0.4s linear forwards so-from-28;"
+    },
+    "sgbqwh": {
+      "rules": "d:path('M4 21v-1c0 -3.31 2.69 -6 6 -6h4c3.31 0 6 2.69 6 6v1');"
+    },
+    "ko2cgq": {
+      "rules": "",
+      "animation": "stroke-dasharray:28;stroke-dashoffset:28;animation:0.4s linear 0.4s forwards so-to-0;"
+    },
+    "yc6i9w": {
+      "rules": "d:path('M12 11c-2.21 0 -4 -1.79 -4 -4c0 -2.21 1.79 -4 4 -4c2.21 0 4 1.79 4 4c0 2.21 -1.79 4 -4 4Z');"
+    },
+    "a0m25c": {
+      "rules": "stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;stroke-width:2px;fill:none;"
+    }
+  },
+  "keyframes": {
+    "so-from-28": "@keyframes so-from-28{0%{stroke-dashoffset:28}}",
+    "so-to-0": "@keyframes so-to-0{100%{stroke-dashoffset:0}}"
+  }
+}

package/css-json/alert-circle-loop.json

@@ -0,0 +1,40 @@
+{
+  "content": "<path class=\"a0m25c gsunef ntf2iq\"/><path class=\"a0m25c cdn18h fp8d8g\"/><path class=\"a0m25c t_eeob xlm2_l\"/>",
+  "viewBox": {
+    "left": 0,
+    "top": 0,
+    "width": 24,
+    "height": 24
+  },
+  "classes": {
+    "ntf2iq": {
+      "rules": "",
+      "animation": "stroke-dasharray:60;animation:0.6s linear forwards so-from-60;"
+    },
+    "gsunef": {
+      "rules": "d:path('M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z');"
+    },
+    "cdn18h": {
+      "rules": "",
+      "animation": "stroke-dasharray:8;stroke-dashoffset:8;animation:3s linear 0.7s infinite sw-cnj-zb, 0.2s linear 0.7s forwards so-to-0;"
+    },
+    "fp8d8g": {
+      "rules": "d:path('M12 7v6');"
+    },
+    "t_eeob": {
+      "rules": "",
+      "animation": "stroke-dasharray:4;stroke-dashoffset:4;animation:0.2s linear 0.7s forwards so-to-0, 3s linear 1s infinite sw-cnj-zb;"
+    },
+    "xlm2_l": {
+      "rules": "d:path('M12 17v0.01');"
+    },
+    "a0m25c": {
+      "rules": "stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;stroke-width:2px;fill:none;"
+    }
+  },
+  "keyframes": {
+    "so-from-60": "@keyframes so-from-60{0%{stroke-dashoffset:60}}",
+    "sw-cnj-zb": "@keyframes sw-cnj-zb{10%, 20%{stroke-width:3px}30%{stroke-width:2px}}",
+    "so-to-0": "@keyframes so-to-0{100%{stroke-dashoffset:0}}"
+  }
+}

package/css-json/alert-circle-twotone-loop.json

@@ -0,0 +1,45 @@
+{
+  "content": "<path class=\"iw1iew rkztdv y-of2o\"/><path class=\"cdn18h fp8d8g iw1iew y4wbml\"/><path class=\"iw1iew t_eeob xlm2_l y4wbml\"/>",
+  "viewBox": {
+    "left": 0,
+    "top": 0,
+    "width": 24,
+    "height": 24
+  },
+  "classes": {
+    "y-of2o": {
+      "rules": "",
+      "animation": "stroke-dasharray:60;animation:0s forwards fill-to-0, 0.6s linear forwards so-from-60, 0.15s linear 1s forwards fill-to-0_3;"
+    },
+    "cdn18h": {
+      "rules": "",
+      "animation": "stroke-dasharray:8;stroke-dashoffset:8;animation:3s linear 0.7s infinite sw-cnj-zb, 0.2s linear 0.7s forwards so-to-0;"
+    },
+    "fp8d8g": {
+      "rules": "d:path('M12 7v6');"
+    },
+    "y4wbml": {
+      "rules": "fill:none;"
+    },
+    "t_eeob": {
+      "rules": "",
+      "animation": "stroke-dasharray:4;stroke-dashoffset:4;animation:0.2s linear 0.7s forwards so-to-0, 3s linear 1s infinite sw-cnj-zb;"
+    },
+    "xlm2_l": {
+      "rules": "d:path('M12 17v0.01');"
+    },
+    "iw1iew": {
+      "rules": "stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;stroke-width:2px;"
+    },
+    "rkztdv": {
+      "rules": "d:path('M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z');fill-opacity:0.3;fill:currentColor;"
+    }
+  },
+  "keyframes": {
+    "fill-to-0": "@keyframes fill-to-0{100%{fill-opacity:0}}",
+    "so-from-60": "@keyframes so-from-60{0%{stroke-dashoffset:60}}",
+    "fill-to-0_3": "@keyframes fill-to-0_3{100%{fill-opacity:0.3}}",
+    "sw-cnj-zb": "@keyframes sw-cnj-zb{10%, 20%{stroke-width:3px}30%{stroke-width:2px}}",
+    "so-to-0": "@keyframes so-to-0{100%{stroke-dashoffset:0}}"
+  }
+}

package/css-json/alert-circle-twotone.json

@@ -0,0 +1,44 @@
+{
+  "content": "<path class=\"iw1iew rkztdv y-of2o\"/><path class=\"fp8d8g iw1iew tgs9dx y4wbml\"/><path class=\"iw1iew rp5_zv xlm2_l y4wbml\"/>",
+  "viewBox": {
+    "left": 0,
+    "top": 0,
+    "width": 24,
+    "height": 24
+  },
+  "classes": {
+    "y-of2o": {
+      "rules": "",
+      "animation": "stroke-dasharray:60;animation:0s forwards fill-to-0, 0.6s linear forwards so-from-60, 0.15s linear 1s forwards fill-to-0_3;"
+    },
+    "tgs9dx": {
+      "rules": "",
+      "animation": "stroke-dasharray:8;stroke-dashoffset:8;animation:0.2s linear 0.7s forwards so-to-0;"
+    },
+    "fp8d8g": {
+      "rules": "d:path('M12 7v6');"
+    },
+    "y4wbml": {
+      "rules": "fill:none;"
+    },
+    "rp5_zv": {
+      "rules": "",
+      "animation": "stroke-dasharray:4;stroke-dashoffset:4;animation:0.2s linear 0.7s forwards so-to-0;"
+    },
+    "xlm2_l": {
+      "rules": "d:path('M12 17v0.01');"
+    },
+    "iw1iew": {
+      "rules": "stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;stroke-width:2px;"
+    },
+    "rkztdv": {
+      "rules": "d:path('M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z');fill-opacity:0.3;fill:currentColor;"
+    }
+  },
+  "keyframes": {
+    "fill-to-0": "@keyframes fill-to-0{100%{fill-opacity:0}}",
+    "so-from-60": "@keyframes so-from-60{0%{stroke-dashoffset:60}}",
+    "fill-to-0_3": "@keyframes fill-to-0_3{100%{fill-opacity:0.3}}",
+    "so-to-0": "@keyframes so-to-0{100%{stroke-dashoffset:0}}"
+  }
+}

package/css-json/alert-circle.json

@@ -0,0 +1,39 @@
+{
+  "content": "<path class=\"a0m25c gsunef ntf2iq\"/><path class=\"a0m25c fp8d8g tgs9dx\"/><path class=\"a0m25c rp5_zv xlm2_l\"/>",
+  "viewBox": {
+    "left": 0,
+    "top": 0,
+    "width": 24,
+    "height": 24
+  },
+  "classes": {
+    "ntf2iq": {
+      "rules": "",
+      "animation": "stroke-dasharray:60;animation:0.6s linear forwards so-from-60;"
+    },
+    "gsunef": {
+      "rules": "d:path('M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z');"
+    },
+    "tgs9dx": {
+      "rules": "",
+      "animation": "stroke-dasharray:8;stroke-dashoffset:8;animation:0.2s linear 0.7s forwards so-to-0;"
+    },
+    "fp8d8g": {
+      "rules": "d:path('M12 7v6');"
+    },
+    "rp5_zv": {
+      "rules": "",
+      "animation": "stroke-dasharray:4;stroke-dashoffset:4;animation:0.2s linear 0.7s forwards so-to-0;"
+    },
+    "xlm2_l": {
+      "rules": "d:path('M12 17v0.01');"
+    },
+    "a0m25c": {
+      "rules": "stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;stroke-width:2px;fill:none;"
+    }
+  },
+  "keyframes": {
+    "so-from-60": "@keyframes so-from-60{0%{stroke-dashoffset:60}}",
+    "so-to-0": "@keyframes so-to-0{100%{stroke-dashoffset:0}}"
+  }
+}

package/css-json/alert-loop.json

@@ -0,0 +1,40 @@
+{
+  "content": "<path class=\"a0m25c d_7zna ntf2iq\"/><path class=\"a0m25c hg4jfh uxpaqu\"/><path class=\"a0m25c t_eeob xlm2_l\"/>",
+  "viewBox": {
+    "left": 0,
+    "top": 0,
+    "width": 24,
+    "height": 24
+  },
+  "classes": {
+    "ntf2iq": {
+      "rules": "",
+      "animation": "stroke-dasharray:60;animation:0.6s linear forwards so-from-60;"
+    },
+    "d_7zna": {
+      "rules": "d:path('M12 3l9 17h-18l9 -17Z');"
+    },
+    "uxpaqu": {
+      "rules": "",
+      "animation": "stroke-dasharray:6;stroke-dashoffset:6;animation:3s linear 0.7s infinite sw-cnj-zb, 0.2s linear 0.7s forwards so-to-0;"
+    },
+    "hg4jfh": {
+      "rules": "d:path('M12 10v4');"
+    },
+    "t_eeob": {
+      "rules": "",
+      "animation": "stroke-dasharray:4;stroke-dashoffset:4;animation:0.2s linear 0.7s forwards so-to-0, 3s linear 1s infinite sw-cnj-zb;"
+    },
+    "xlm2_l": {
+      "rules": "d:path('M12 17v0.01');"
+    },
+    "a0m25c": {
+      "rules": "stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;stroke-width:2px;fill:none;"
+    }
+  },
+  "keyframes": {
+    "so-from-60": "@keyframes so-from-60{0%{stroke-dashoffset:60}}",
+    "sw-cnj-zb": "@keyframes sw-cnj-zb{10%, 20%{stroke-width:3px}30%{stroke-width:2px}}",
+    "so-to-0": "@keyframes so-to-0{100%{stroke-dashoffset:0}}"
+  }
+}

package/css-json/alert-square-loop.json

@@ -0,0 +1,40 @@
+{
+  "content": "<path class=\"a0m25c a6syfw ao492n\"/><path class=\"a0m25c cdn18h fp8d8g\"/><path class=\"a0m25c t_eeob xlm2_l\"/>",
+  "viewBox": {
+    "left": 0,
+    "top": 0,
+    "width": 24,
+    "height": 24
+  },
+  "classes": {
+    "ao492n": {
+      "rules": "",
+      "animation": "stroke-dasharray:66;animation:0.6s linear forwards so-from-66;"
+    },
+    "a6syfw": {
+      "rules": "d:path('M12 4h7c0.55 0 1 0.45 1 1v14c0 0.55 -0.45 1 -1 1h-14c-0.55 0 -1 -0.44 -1 -1v-14c0 -0.55 0.45 -1 1 -1Z');"
+    },
+    "cdn18h": {
+      "rules": "",
+      "animation": "stroke-dasharray:8;stroke-dashoffset:8;animation:3s linear 0.7s infinite sw-cnj-zb, 0.2s linear 0.7s forwards so-to-0;"
+    },
+    "fp8d8g": {
+      "rules": "d:path('M12 7v6');"
+    },
+    "t_eeob": {
+      "rules": "",
+      "animation": "stroke-dasharray:4;stroke-dashoffset:4;animation:0.2s linear 0.7s forwards so-to-0, 3s linear 1s infinite sw-cnj-zb;"
+    },
+    "xlm2_l": {
+      "rules": "d:path('M12 17v0.01');"
+    },
+    "a0m25c": {
+      "rules": "stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;stroke-width:2px;fill:none;"
+    }
+  },
+  "keyframes": {
+    "so-from-66": "@keyframes so-from-66{0%{stroke-dashoffset:66}}",
+    "sw-cnj-zb": "@keyframes sw-cnj-zb{10%, 20%{stroke-width:3px}30%{stroke-width:2px}}",
+    "so-to-0": "@keyframes so-to-0{100%{stroke-dashoffset:0}}"
+  }
+}