line-md 0.0.4 → 0.2.2

package/.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = tab
+indent_size = 4
+charset = utf-8
+trim_trailing_whitespace = true
+
+[{*.json,*.yml}]
+indent_style = space
+indent_size = 2

package/.github/FUNDING.yml

@@ -0,0 +1 @@
+github: cyberalien

package/.prettierrc

@@ -1,7 +1,7 @@
 {
 	"trailingComma": "es5",
 	"singleQuote": true,
-	"useTabs": true,
-	"semi": true,
-	"quoteProps": "consistent"
+    "useTabs": true,
+    "semi": true,
+    "quoteProps": "consistent"
 }

package/README.md

@@ -4,54 +4,49 @@ There are many icon sets that are designed to Material Design guidelines. You ca
 
 This icon set is different:
 
-- Icons are animated using CSS animations for stroke.
-- 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 using SVG animations. No CSS or 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.
 
 Preview is available at https://cyberalien.github.io/line-md/
 
-Icon set is in development. It contains only few icons so far. Icons can change any time.
+Icon set is in development. It contains only few icons so far.
 
-# CSS stroke animations
+## Icon requests
 
-Icons use stroke that can be animated on first render. All you have to do is add class "iconify--line-md" to SVG element (Iconify SVG framework 2.0 does it automatically) and include stylesheet from `https://code.iconify.design/css/line-md.css`.
+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).
 
-To refresh animation you can either re-render icon or use display to hide and show it.
+## SVG animations level 2
 
-# Usage in HTML
+Icons use [SVG animations](https://svgwg.org/specs/animations/), which are contained in icon code and do not require external stylesheet or script.
 
-1. Add stylesheet for CSS animations:
+No, these are not outdated SMIL animations. Icons are animated using modern SVG spec, supported by all browsers.
 
-```html
-<link rel="stylesheet" href="https://code.iconify.design/css/line-md.css" />
-```
-
-2. Include Iconify SVG framework:
-
-```html
-<script src="https://code.iconify.design/2/2.0.0-rc.1/iconify.min.js"></script>
-```
+## Animation types
 
-3. Add placeholder for icon, using "line-md" prefix:
+Most icons use "fade-in" animation. Animation shows icon appearing from nothing.
 
-```html
-<span class="iconify" data-icon="line-md:home"></span>
-```
+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 (not yet available, but planned).
 
-See [Iconify SVG framework documentation](https://docs.iconify.design/implementations/svg-framework/) for details.
+## Usage in HTML
 
-# Components
+1. Include IconifyIcon component, [see `iconify-icon` package for latest code](https://www.npmjs.com/package/iconify-icon).
 
-React, Vue and Svelte components are available. See [Iconify components documentation](https://docs.iconify.design/implementations/components/) for details.
+2. Add icon, using "line-md" prefix:
 
-# Icon requests
+```html
+<iconify-icon icon="line-md:home"></iconify-icon>
+```
 
-You can [open an issue on GitHub repository](https://github.com/cyberalien/line-md/issues) to request icons.
+## Usage without web component
 
-Icons are currently designed in Figma and exported using custom Figma plug-in. Plug-in calculates lengths of all shapes, order of animations and assigns appropriate classes to shapes within exported SVG.
+There are few issues with SVG animations.
 
-At moment of writing this, Figma has a bug with exporting shapes that require masking (it replaces stroke with fill and merges shape with mask), which means complex shapes cannot be animated, so icons that require masks cannot be added yet.
+[Iconify icon web component](https://docs.iconify.design/iconify-icon/) solves those issues, but if you are using icons without it, see [article that explains known SVG issues and solutions](https://docs.iconify.design/articles/svg-animation-issues/).
 
-# Licence
+## Licence
 
 MIT