line-md 3.0.0 → 3.0.2

package/CNAME

@@ -0,0 +1 @@
+line-md.cyberalien.dev

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.
 
@@ -12,40 +12,139 @@ You can browse all icons at https://icon-sets.iconify.design/line-md/
 
 Click any icon to get code you can use in your project.
 
+## Rendering animation
+
+Vast majority of icons in this repository use "rendering" animation: icon shapes are rendered one by one.
+
+This is the safest way to animate icons, which improves UX rather than makes it worse.
+
+Why is that?
+
+Typical "bounce" animations make UX worse because:
+
+-   They take user's focus from actual content.
+-   Looping animations use a lot of resources, making page slower. CPU is always busy, so on mobile devices such animations deplete battery.
+
+Rendering animation, if used correctly, can improve user experience. Animation takes user focus only temporarily, when icon is rendered. Animation duration is very short, so it does not use too much resources.
+
 ## Icon requests
 
 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
+Pull requests with icons are not accepted. This icon set is used as for testing custom SVG animation software, all icons in this repository are generated by that software.
+
+## Icon types
+
+There are several directories with different variations of the same icons:
+
+-   `svg-static` contains 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 (see below).
+-   `svg-frames-120fps` contains SVG files for each animation frame, rendered at 120 frames per second.
 
-Icons use [SVG animations](https://svgwg.org/specs/animations/), which are contained in icon code and do not require external stylesheet or script.
+### 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.
 
-## Animation types
+### CSS animations
 
-Most icons use "fade-in" animation. Animation shows icon appearing from nothing.
+Icons in `svg-style` and `css-json` directories rely on CSS to animate icons.
 
-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.
+These are superior to SVG animations because:
+
+-   CSS animations are usually faster and use less resources.
+-   Icons are compact because CSS can be moved to a `.css` file and cached in browser, also avoiding content duplication.
+-   Icons check user `prefers-reduced-motion` settings, rendering static icon for users that do not want animations.
+-   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 animated with CSS, but stored in JSON format, so SVG and CSS are separate.
 
-## Usage in HTML
+These files are for developers, so you can render final icons yourself.
 
-1. Include IconifyIcon component, [see `iconify-icon` package for latest code](https://www.npmjs.com/package/iconify-icon).
+JSON format has the following properties:
 
-2. Add icon, using "line-md" prefix:
+-   `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.
 
-```html
-<iconify-icon icon="line-md:home"></iconify-icon>
+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.
+
+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;
+}
 ```
 
-## Usage without web component
+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.
 
-There are few issues with SVG animations.
+### Frames
+
+If you want to use animated icons in software that does not support animations, `svg-frames-120fps` directory contains static SVG files for each animation frame, rendered at 120 frames per second.
+
+Each directory contains frames for one icon.
+
+Additionally, as JSON file with metadata is available, which shows number of frames used for main animation and number of frames used for repeating animation. Repeating animation can be rendered in loop after rendering main animation, or, if you only need a repeating animation, skip rendering animation.
+
+Due to massive amount of frames, it is available only as SVG.
+
+If you need a different format for each frame, such as PNG, you need to convert it yourself. These are basic SVG files that any software should be able to handle. There are many options for converting basic SVG to other formats.
+
+## Animation types
+
+Most icons use "render" animation: icon shapes appearing one by one.
+
+Other icons:
 
-[Iconify icon web component](https://iconify.design/docs/iconify-icon/) solves those issues, but if you are using icons without it, see [article that explains known SVG issues and solutions](https://iconify.design/docs/articles/svg-animation-issues/).
+-   Icons that end with `-loop` use infinite animtions.
+-   Icons that end with `-transition` transition between two icons.
 
 ## Licence
 

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}}"
+  }
+}