line-md 3.0.3 → 3.0.5

package/README.md

@@ -4,9 +4,9 @@ There are many icon sets that are designed to Material Design guidelines. You ca
 
 This icon set is different:
 
--   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.
+- 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.
 
 You can browse all icons at https://icon-sets.iconify.design/line-md/
 
@@ -22,8 +22,8 @@ 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.
+- 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.
 
@@ -37,11 +37,11 @@ Pull requests with icons are not accepted. This icon set is used as for testing
 
 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.
+- `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.
 
 ### SVG animations level 2
 
@@ -55,10 +55,10 @@ Icons in `svg-style` and `css-json` directories rely on CSS to animate 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.
+- 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.
 
@@ -76,41 +76,40 @@ These files are for developers, so you can render final icons yourself.
 
 JSON format has 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.
+- `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 string with rules.
+- `animations` is the same as `classes`, but for animation rules, so you can wrap it in `@media not (prefers-reduced-motion)` if needed.
+- `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):
+This is the final format used in [SVG Utils](https://github.com/cyberalien/svg-utils) package, supported by [Iconify Unplugin](https://github.com/iconify/iconify-unplugin).
 
--   `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.
+Also, `@iconify-vue/line-md` and `@iconify-svelte/line-md` have pre-made components that are generated from this data and use CSS animations, see [Iconify documentation](https://iconify.design/docs/usage/svg-css/).
 
 TypeScript type used in generator for exporting these JSON files:
 
 ```ts
-interface CSSJSONExport {
+// From @cyberalien/svg-utils/lib/svg-css/icon/types.js
+// Reduced to include only properties used in this icon set, all rules and
+// keyframes in this repository are converted to strings to simplify parsing.
+interface SVGCSSIcon {
 	// SVG content
 	content: string;
 
 	// viewBox
-	viewBox: IconViewBox;
+	viewBox: IconViewBox | string;
 
 	// Classes, key is class name
-	classes: Record<string, CSSJSONExportRules>;
+	classes: Record<string, string>;
+
+	// Animations for classes
+	// Same as 'classes', but for animation properties, so it can be separated in the output CSS
+	animations?: Record<string, string>;
 
 	// 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;
@@ -143,8 +142,8 @@ Most icons use "render" animation: icon shapes appearing one by one.
 
 Other icons:
 
--   Icons that end with `-loop` use infinite animtions.
--   Icons that end with `-transition` transition between two icons.
+- Icons that end with `-loop` use infinite animtions.
+- Icons that end with `-transition` transition between two icons.
 
 ## Licence
 

package/css-json/account-add.json

@@ -1,43 +1,22 @@
 {
-  "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
+  "viewBox": "0 0 24 24",
+  "content": "<path class=\"a0m25c haw7oj\"/><path class=\"a0m25c ppgzfw\"/><path class=\"a0m25c x5jt8i\"/><path class=\"a0m25c g5y2dq\"/>",
+  "fallback": "line-md:account-add",
+  "keyframes": {
+    "so-from-22": "0%{stroke-dashoffset:22}",
+    "so-to-0": "100%{stroke-dashoffset:0}"
   },
   "classes": {
-    "l5bica": {
-      "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": {
-      "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": {
-      "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": {
-      "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;"
-    }
+    "haw7oj": "d:path('M3 21v-1c0 -2.21 1.79 -4 4 -4h4c2.21 0 4 1.79 4 4v1');",
+    "a0m25c": "stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;stroke-width:2px;fill:none;",
+    "ppgzfw": "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');",
+    "x5jt8i": "d:path('M15 6h6');",
+    "g5y2dq": "d:path('M18 3v6');"
   },
-  "fallback": "line-md:account-add",
-  "keyframes": {
-    "so-from-22": "@keyframes so-from-22{0%{stroke-dashoffset:22}}",
-    "so-to-0": "@keyframes so-to-0{100%{stroke-dashoffset:0}}"
+  "animations": {
+    "haw7oj": "stroke-dasharray:22;animation:0.3s linear forwards so-from-22;",
+    "ppgzfw": "stroke-dasharray:22;stroke-dashoffset:22;animation:0.3s linear 0.3s forwards so-to-0;",
+    "x5jt8i": "stroke-dasharray:8;stroke-dashoffset:8;animation:0.2s linear 0.7s forwards so-to-0;",
+    "g5y2dq": "stroke-dasharray:8;stroke-dashoffset:8;animation:0.2s linear 0.9s forwards so-to-0;"
   }
 }

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

@@ -1,44 +1,23 @@
 {
-  "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
+  "viewBox": "0 0 24 24",
+  "content": "<path class=\"a0m25c ji8mks\"/><path class=\"a0m25c wcbo4y\"/><path class=\"a0m25c cu0zwu\"/><path class=\"a0m25c ct9a5j\"/>",
+  "fallback": "line-md:account-alert-loop",
+  "keyframes": {
+    "so-from-22": "0%{stroke-dashoffset:22}",
+    "so-to-0": "100%{stroke-dashoffset:0}",
+    "sw-cnj-zb": "10%, 20%{stroke-width:3px}30%{stroke-width:2px}"
   },
   "classes": {
-    "l5bica": {
-      "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": {
-      "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": {
-      "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": {
-      "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;"
-    }
+    "a0m25c": "stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;stroke-width:2px;fill:none;",
+    "ji8mks": "d:path('M5 21v-1c0 -2.21 1.79 -4 4 -4h4c2.21 0 4 1.79 4 4v1');",
+    "wcbo4y": "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');",
+    "cu0zwu": "d:path('M20 3v4');",
+    "ct9a5j": "d:path('M20 11v0.01');"
   },
-  "fallback": "line-md:account-alert-loop",
-  "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}}"
+  "animations": {
+    "ji8mks": "stroke-dasharray:22;animation:0.3s linear forwards so-from-22;",
+    "wcbo4y": "stroke-dasharray:22;stroke-dashoffset:22;animation:0.3s linear 0.3s forwards so-to-0;",
+    "cu0zwu": "stroke-dasharray:6;stroke-dashoffset:6;animation:0.2s linear 0.7s forwards so-to-0, 3s linear 0.9s infinite sw-cnj-zb;",
+    "ct9a5j": "stroke-dasharray:4;stroke-dashoffset:4;animation:0.2s linear 0.9s forwards so-to-0, 3s linear 1.2s infinite sw-cnj-zb;"
   }
 }

package/css-json/account-alert.json

@@ -1,43 +1,22 @@
 {
-  "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
+  "viewBox": "0 0 24 24",
+  "content": "<path class=\"a0m25c ji8mks\"/><path class=\"a0m25c wcbo4y\"/><path class=\"a0m25c aqo_mf\"/><path class=\"a0m25c jsh6kw\"/>",
+  "fallback": "line-md:account-alert",
+  "keyframes": {
+    "so-from-22": "0%{stroke-dashoffset:22}",
+    "so-to-0": "100%{stroke-dashoffset:0}"
   },
   "classes": {
-    "l5bica": {
-      "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": {
-      "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": {
-      "animation": "stroke-dasharray:6;stroke-dashoffset:6;animation:0.2s linear 0.7s forwards so-to-0;"
-    },
-    "j1379g": {
-      "rules": "d:path('M20 3v4');"
-    },
-    "e6cmxg": {
-      "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;"
-    }
+    "a0m25c": "stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;stroke-width:2px;fill:none;",
+    "ji8mks": "d:path('M5 21v-1c0 -2.21 1.79 -4 4 -4h4c2.21 0 4 1.79 4 4v1');",
+    "wcbo4y": "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');",
+    "aqo_mf": "d:path('M20 3v4');",
+    "jsh6kw": "d:path('M20 11v0.01');"
   },
-  "fallback": "line-md:account-alert",
-  "keyframes": {
-    "so-from-22": "@keyframes so-from-22{0%{stroke-dashoffset:22}}",
-    "so-to-0": "@keyframes so-to-0{100%{stroke-dashoffset:0}}"
+  "animations": {
+    "ji8mks": "stroke-dasharray:22;animation:0.3s linear forwards so-from-22;",
+    "wcbo4y": "stroke-dasharray:22;stroke-dashoffset:22;animation:0.3s linear 0.3s forwards so-to-0;",
+    "aqo_mf": "stroke-dasharray:6;stroke-dashoffset:6;animation:0.2s linear 0.7s forwards so-to-0;",
+    "jsh6kw": "stroke-dasharray:4;stroke-dashoffset:4;animation:0.2s linear 0.9s forwards so-to-0;"
   }
 }

package/css-json/account-delete.json

@@ -1,43 +1,22 @@
 {
-  "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
+  "viewBox": "0 0 24 24",
+  "content": "<path class=\"a0m25c haw7oj\"/><path class=\"a0m25c ppgzfw\"/><path class=\"a0m25c rjrx6c\"/><path class=\"a0m25c ksflva\"/>",
+  "fallback": "line-md:account-delete",
+  "keyframes": {
+    "so-from-22": "0%{stroke-dashoffset:22}",
+    "so-to-0": "100%{stroke-dashoffset:0}"
   },
   "classes": {
-    "l5bica": {
-      "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": {
-      "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": {
-      "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": {
-      "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;"
-    }
+    "haw7oj": "d:path('M3 21v-1c0 -2.21 1.79 -4 4 -4h4c2.21 0 4 1.79 4 4v1');",
+    "a0m25c": "stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;stroke-width:2px;fill:none;",
+    "ppgzfw": "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');",
+    "rjrx6c": "d:path('M15 3l6 6');",
+    "ksflva": "d:path('M21 3l-6 6');"
   },
-  "fallback": "line-md:account-delete",
-  "keyframes": {
-    "so-from-22": "@keyframes so-from-22{0%{stroke-dashoffset:22}}",
-    "so-to-0": "@keyframes so-to-0{100%{stroke-dashoffset:0}}"
+  "animations": {
+    "haw7oj": "stroke-dasharray:22;animation:0.3s linear forwards so-from-22;",
+    "ppgzfw": "stroke-dasharray:22;stroke-dashoffset:22;animation:0.3s linear 0.3s forwards so-to-0;",
+    "rjrx6c": "stroke-dasharray:12;stroke-dashoffset:12;animation:0.2s linear 0.7s forwards so-to-0;",
+    "ksflva": "stroke-dasharray:12;stroke-dashoffset:12;animation:0.2s linear 0.9s forwards so-to-0;"
   }
 }

package/css-json/account-remove.json

@@ -1,37 +1,20 @@
 {
-  "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
+  "viewBox": "0 0 24 24",
+  "content": "<path class=\"a0m25c haw7oj\"/><path class=\"a0m25c ppgzfw\"/><path class=\"a0m25c x5jt8i\"/>",
+  "fallback": "line-md:account-remove",
+  "keyframes": {
+    "so-from-22": "0%{stroke-dashoffset:22}",
+    "so-to-0": "100%{stroke-dashoffset:0}"
   },
   "classes": {
-    "l5bica": {
-      "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": {
-      "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": {
-      "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;"
-    }
+    "haw7oj": "d:path('M3 21v-1c0 -2.21 1.79 -4 4 -4h4c2.21 0 4 1.79 4 4v1');",
+    "a0m25c": "stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;stroke-width:2px;fill:none;",
+    "ppgzfw": "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');",
+    "x5jt8i": "d:path('M15 6h6');"
   },
-  "fallback": "line-md:account-remove",
-  "keyframes": {
-    "so-from-22": "@keyframes so-from-22{0%{stroke-dashoffset:22}}",
-    "so-to-0": "@keyframes so-to-0{100%{stroke-dashoffset:0}}"
+  "animations": {
+    "haw7oj": "stroke-dasharray:22;animation:0.3s linear forwards so-from-22;",
+    "ppgzfw": "stroke-dasharray:22;stroke-dashoffset:22;animation:0.3s linear 0.3s forwards so-to-0;",
+    "x5jt8i": "stroke-dasharray:8;stroke-dashoffset:8;animation:0.2s linear 0.7s forwards so-to-0;"
   }
 }

package/css-json/account-small.json

@@ -1,31 +1,18 @@
 {
-  "content": "<path class=\"a0m25c i4_pka l5bica\"/><path class=\"a0m25c rsldly zulf0v\"/>",
-  "viewBox": {
-    "left": 0,
-    "top": 0,
-    "width": 24,
-    "height": 24
+  "viewBox": "0 0 24 24",
+  "content": "<path class=\"a0m25c g2owwz\"/><path class=\"a0m25c gv_amu\"/>",
+  "fallback": "line-md:account-small",
+  "keyframes": {
+    "so-from-22": "0%{stroke-dashoffset:22}",
+    "so-to-0": "100%{stroke-dashoffset:0}"
   },
   "classes": {
-    "l5bica": {
-      "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": {
-      "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;"
-    }
+    "a0m25c": "stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;stroke-width:2px;fill:none;",
+    "g2owwz": "d:path('M6 19v-1c0 -2.21 1.79 -4 4 -4h4c2.21 0 4 1.79 4 4v1');",
+    "gv_amu": "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');"
   },
-  "fallback": "line-md:account-small",
-  "keyframes": {
-    "so-from-22": "@keyframes so-from-22{0%{stroke-dashoffset:22}}",
-    "so-to-0": "@keyframes so-to-0{100%{stroke-dashoffset:0}}"
+  "animations": {
+    "g2owwz": "stroke-dasharray:22;animation:0.3s linear forwards so-from-22;",
+    "gv_amu": "stroke-dasharray:22;stroke-dashoffset:22;animation:0.3s linear 0.3s forwards so-to-0;"
   }
 }

package/css-json/account.json

@@ -1,31 +1,18 @@
 {
-  "content": "<path class=\"a0m25c sgbqwh vu2phh\"/><path class=\"a0m25c ko2cgq yc6i9w\"/>",
-  "viewBox": {
-    "left": 0,
-    "top": 0,
-    "width": 24,
-    "height": 24
+  "viewBox": "0 0 24 24",
+  "content": "<path class=\"a0m25c ehh26n\"/><path class=\"a0m25c asf8ox\"/>",
+  "fallback": "line-md:account",
+  "keyframes": {
+    "so-from-28": "0%{stroke-dashoffset:28}",
+    "so-to-0": "100%{stroke-dashoffset:0}"
   },
   "classes": {
-    "vu2phh": {
-      "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": {
-      "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;"
-    }
+    "a0m25c": "stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;stroke-width:2px;fill:none;",
+    "ehh26n": "d:path('M4 21v-1c0 -3.31 2.69 -6 6 -6h4c3.31 0 6 2.69 6 6v1');",
+    "asf8ox": "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');"
   },
-  "fallback": "line-md:account",
-  "keyframes": {
-    "so-from-28": "@keyframes so-from-28{0%{stroke-dashoffset:28}}",
-    "so-to-0": "@keyframes so-to-0{100%{stroke-dashoffset:0}}"
+  "animations": {
+    "ehh26n": "stroke-dasharray:28;animation:0.4s linear forwards so-from-28;",
+    "asf8ox": "stroke-dasharray:28;stroke-dashoffset:28;animation:0.4s linear 0.4s forwards so-to-0;"
   }
 }

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

@@ -1,38 +1,21 @@
 {
-  "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
+  "viewBox": "0 0 24 24",
+  "content": "<path class=\"a0m25c y2h43n\"/><path class=\"a0m25c sjppje\"/><path class=\"a0m25c i--0rr\"/>",
+  "fallback": "line-md:alert-circle-loop",
+  "keyframes": {
+    "so-from-60": "0%{stroke-dashoffset:60}",
+    "sw-cnj-zb": "10%, 20%{stroke-width:3px}30%{stroke-width:2px}",
+    "so-to-0": "100%{stroke-dashoffset:0}"
   },
   "classes": {
-    "ntf2iq": {
-      "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": {
-      "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": {
-      "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;"
-    }
+    "a0m25c": "stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;stroke-width:2px;fill:none;",
+    "y2h43n": "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');",
+    "sjppje": "d:path('M12 7v6');",
+    "i--0rr": "d:path('M12 17v0.01');"
   },
-  "fallback": "line-md:alert-circle-loop",
-  "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}}"
+  "animations": {
+    "y2h43n": "stroke-dasharray:60;animation:0.6s linear forwards so-from-60;",
+    "sjppje": "stroke-dasharray:8;stroke-dashoffset:8;animation:3s linear 0.7s infinite sw-cnj-zb, 0.2s linear 0.7s forwards so-to-0;",
+    "i--0rr": "stroke-dasharray:4;stroke-dashoffset:4;animation:0.2s linear 0.7s forwards so-to-0, 3s linear 1s infinite sw-cnj-zb;"
   }
 }