line-md 3.0.1 → 3.0.2

package/CNAME

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

package/README.md

@@ -12,18 +12,36 @@ 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).
 
+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 staic icons without animations.
+-   `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. These files are for developers, so you can render final icons yourself.
+-   `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
 
@@ -37,8 +55,9 @@ 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.
+-   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.
@@ -51,7 +70,11 @@ Safari browser does not support `path()` CSS function for `d` attribute, but Saf
 
 ### CSS animations as JSON
 
-Files in `css-json` directory are in JSON format with the following properties:
+Files in `css-json` directory are animated with CSS, but stored in JSON format, so SVG and CSS are separate.
+
+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.
@@ -63,7 +86,7 @@ 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:
+TypeScript type used in generator for exporting these JSON files:
 
 ```ts
 interface CSSJSONExport {
@@ -102,31 +125,26 @@ Class names and animation names are generated by hashing content, so possible cl
 
 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.
+### Frames
 
-Other icons:
+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.
 
--   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.
+Each directory contains frames for one icon.
 
-## Usage in HTML
+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.
 
-1. Include IconifyIcon component, [see `iconify-icon` package for latest code](https://www.npmjs.com/package/iconify-icon).
+Due to massive amount of frames, it is available only as SVG.
 
-2. Add icon, using "line-md" prefix:
+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.
 
-```html
-<iconify-icon icon="line-md:home"></iconify-icon>
-```
+## Animation types
 
-## Usage without web component
+Most icons use "render" animation: icon shapes appearing one by one.
 
-There are few issues with SVG animations.
+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/line-md.json

@@ -19,7 +19,7 @@
     "height": 24,
     "total": 1218
   },
-  "lastModified": 1767178193,
+  "lastModified": 1767205258,
   "icons": {
     "account": {
       "body": "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" stroke-dasharray=\"28\"><path d=\"M4 21v-1c0 -3.31 2.69 -6 6 -6h4c3.31 0 6 2.69 6 6v1\"><animate attributeName=\"stroke-dashoffset\" dur=\"0.4s\" fill=\"freeze\" values=\"28;0\"/></path><path d=\"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\" stroke-dashoffset=\"28\"><animate attributeName=\"stroke-dashoffset\" begin=\"0.4s\" dur=\"0.4s\" fill=\"freeze\" to=\"0\"/></path></g>"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "line-md",
-	"version": "3.0.1",
+	"version": "3.0.2",
 	"type": "module",
 	"description": "Material Line Icons",
 	"author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",