solid-icons - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

esm/IconWrapper.js

@@ -1,3 +0,3 @@
-import { template, setAttribute, spread, insert, effect, style } from 'solid-js/web';
-import 'solid-js';
+import { template, spread, insert, memo, effect, setAttribute, style } from 'solid-js/web';
+import { splitProps } from 'solid-js';
 
@@ -7,48 +7,48 @@ const _tmpl$ = template(`<svg fill="currentColor" strokeWidth="0" xmlns="http://www.w3.org/2000/svg"></svg>`, 2),
 function IconTemplate(props) {
-  const {
-    src,
-    size,
-    title,
-    color,
-    ...svgProps
-  } = props;
-  const computedSize = size || "1em";
-  const trimmedEl = src.c.trim();
-  const withStroke = src.a.stroke && src.a.stroke !== "none";
+  const [split, rest] = splitProps(props, ["src"]);
   return (() => {
     const _el$ = _tmpl$.cloneNode(true);
 
-    setAttribute(_el$, "stroke", withStroke ? "currentColor" : "none");
+    spread(_el$, rest, true, true);
 
-    spread(_el$, svgProps, true, true);
+    spread(_el$, () => split.src.a, true, true);
 
-    spread(_el$, () => src.a, true, true);
+    insert(_el$, (() => {
+      const _c$ = memo(() => !!rest.title, true);
 
-    setAttribute(_el$, "height", computedSize);
+      return () => _c$() && (() => {
+        const _el$2 = _tmpl$2.cloneNode(true);
 
-    setAttribute(_el$, "width", computedSize);
+        insert(_el$2, () => rest.title);
 
-    _el$.innerHTML = trimmedEl;
-
-    insert(_el$, title && (() => {
-      const _el$2 = _tmpl$2.cloneNode(true);
-
-      insert(_el$2, title);
-
-      return _el$2;
+        return _el$2;
+      })();
     })());
 
     effect(_p$ => {
-      const _v$ = props.className,
-            _v$2 = {
+      const _v$ = split.src.a.stroke,
+            _v$2 = rest.className,
+            _v$3 = {
         overflow: "visible",
-        color: color,
-        ...props.style
-      };
-      _v$ !== _p$._v$ && setAttribute(_el$, "class", _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+        color: rest.color,
+        ...rest.style
+      },
+            _v$4 = rest.size || "1em",
+            _v$5 = rest.size || "1em",
+            _v$6 = split.src.c;
+
+      _v$ !== _p$._v$ && setAttribute(_el$, "stroke", _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && setAttribute(_el$, "class", _p$._v$2 = _v$2);
+      _p$._v$3 = style(_el$, _v$3, _p$._v$3);
+      _v$4 !== _p$._v$4 && setAttribute(_el$, "height", _p$._v$4 = _v$4);
+      _v$5 !== _p$._v$5 && setAttribute(_el$, "width", _p$._v$5 = _v$5);
+      _v$6 !== _p$._v$6 && (_el$.innerHTML = _p$._v$6 = _v$6);
       return _p$;
     }, {
       _v$: undefined,
-      _v$2: undefined
+      _v$2: undefined,
+      _v$3: undefined,
+      _v$4: undefined,
+      _v$5: undefined,
+      _v$6: undefined
     });
@@ -55,0 +55,0 @@

package.json

 {
   "name": "solid-icons",
   "author": "Ignacio Zsabo",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "A SolidJS SVG icons pack",
@@ -27,2 +27,2 @@ "license": "MIT",
   }
-}
+}

README.md

@@ -29,18 +29,18 @@ # SolidJS svg icon pack
 
-| Icon Library                                                       | License                                                                 | Version      |
-| ------------------------------------------------------------------ | ----------------------------------------------------------------------- | ------------ |
-| [Ant Design Icons](https://github.com/ant-design/ant-design-icons) | [MIT](https://opensource.org/licenses/MIT)                              | 4.0.0        |
-| [Bootstrap Icons](https://github.com/twbs/icons)                   | [MIT](https://opensource.org/licenses/MIT)                              | 1.0.0-alpha3 |
-| [BoxIcons](https://github.com/atisawd/boxicons)                    | [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)       | 2.0.5        |
-| [Feather](https://feathericons.com/)                               | [MIT](https://github.com/feathericons/feather/blob/master/LICENSE)      | 4.21.0       |
-| [Font Awesome](https://fontawesome.com/)                           | [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)       | 5.12.1       |
-| [Heroicons](https://github.com/refactoringui/heroicons)            | [MIT](https://github.com/tailwindlabs/heroicons/blob/master/LICENSE)    | 0.4.2        |
-| [IcoMoon Free](https://github.com/Keyamoon/IcoMoon-Free)           | [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)       | 1.0.0        |
-| [Ionicons](https://ionicons.com/)                                  | [MIT](https://github.com/ionic-team/ionicons/blob/master/LICENSE)       | 4.5.6        |
-| [Remix Icon](https://github.com/Remix-Design/RemixIcon)            | [Apache License Version 2.0](http://www.apache.org/licenses/)           | 2.3.0        |
-| [Simple Icons](https://simpleicons.org/)                           | [CC0 1.0 Universal](https://creativecommons.org/publicdomain/zero/1.0/) | 2.13.0       |
-| [Typicons](http://s-ings.com/typicons/)                            | [CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/)         | 2.0.9        |
-| [VS Code Icons](https://github.com/microsoft/vscode-codicons)      | [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)               | 0.0.1        |
-| [Weather Icons](https://erikflowers.github.io/weather-icons/)      | [SIL OFL 1.1](http://scripts.sil.org/OFL)                               | 2.0.10       |
-| [css.gg](https://github.com/astrit/css.gg)                         | [MIT](https://opensource.org/licenses/MIT)                              | 2.0.0        |
+| Icon Library                                                       | License                                                                 | Version |
+| ------------------------------------------------------------------ | ----------------------------------------------------------------------- | ------- |
+| [Ant Design Icons](https://github.com/ant-design/ant-design-icons) | [MIT](https://opensource.org/licenses/MIT)                              | 4.1.0   |
+| [Bootstrap Icons](https://github.com/twbs/icons)                   | [MIT](https://opensource.org/licenses/MIT)                              | 1.5.0   |
+| [BoxIcons](https://github.com/atisawd/boxicons)                    | [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)       | 2.0.8   |
+| [Feather](https://feathericons.com/)                               | [MIT](https://github.com/feathericons/feather/blob/master/LICENSE)      | 4.28.0  |
+| [Font Awesome](https://fontawesome.com/)                           | [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)       | 5.15.3  |
+| [Heroicons](https://github.com/refactoringui/heroicons)            | [MIT](https://github.com/tailwindlabs/heroicons/blob/master/LICENSE)    | 1.0.2   |
+| [IcoMoon Free](https://github.com/Keyamoon/IcoMoon-Free)           | [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)       | 1.0.0   |
+| [Ionicons](https://ionicons.com/)                                  | [MIT](https://github.com/ionic-team/ionicons/blob/master/LICENSE)       | 5.5.2   |
+| [Remix Icon](https://github.com/Remix-Design/RemixIcon)            | [Apache License Version 2.0](http://www.apache.org/licenses/)           | 2.5.0   |
+| [Simple Icons](https://simpleicons.org/)                           | [CC0 1.0 Universal](https://creativecommons.org/publicdomain/zero/1.0/) | 5.7.0   |
+| [Typicons](http://s-ings.com/typicons/)                            | [CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/)         | 2.1.2   |
+| [VS Code Icons](https://github.com/microsoft/vscode-codicons)      | [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)               | 0.0.20  |
+| [Weather Icons](https://erikflowers.github.io/weather-icons/)      | [SIL OFL 1.1](http://scripts.sil.org/OFL)                               | 2.0.12  |
+| [css.gg](https://github.com/astrit/css.gg)                         | [MIT](https://opensource.org/licenses/MIT)                              | 2.0.0   |
 
@@ -59,8 +59,8 @@ You can add more icons by submitting pull requests or creating issues.
 
-| Key     | Default               | Notes             |
-| ------- | --------------------- | ----------------- |
-| `color` | `undefined` (inherit) |                   |
-| `size`  | `1em`                 |                   |
-| `class` | `undefined`           |                   |
-| `title` | `undefined`           | A icon title a11y |
+| Key     | Default                  | Notes             |
+| ------- | ------------------------ | ----------------- |
+| `color` | `currentColor` (inherit) |                   |
+| `size`  | `1em`                    |                   |
+| `class` | `undefined`              |                   |
+| `title` | `undefined`              | A icon title a11y |
 
@@ -78,5 +78,16 @@ ## Demo
 
-Based on :
+## CHANGELOG 0.3.0:
 
-- [svelte-icons-pack](https://github.com/leshak/svelte-icons-pack),
+- Fix Heroicons and Ant Design fill/stroke
+- Icons showcase website is live 🚀
+- IconWrapper main component accept reactive props
+- Most of the icon packs have been updated to the latest version.
+
+## Known issues:
+
+- Ionicons: Most of the icons in this pack work fine but some with outline features have trouble displaying.
+
+This library is based on the work of:
+
+- [svelte-icons-pack](https://github.com/leshak/svelte-icons-pack)
 - [react-icons](https://github.com/react-icons/react-icons)

source/IconWrapper.jsx

@@ -0,1 +1,2 @@
+import { splitProps } from "solid-js";
 const viewBoxes = {
@@ -6,13 +7,10 @@ bi: "0 0 24 24",
 export default function IconTemplate(props) {
-    const { src, size, title, color, ...svgProps } = props;
-    const computedSize = size || "1em";
-    const trimmedEl = src.c.trim();
-    const withStroke = src.a.stroke && src.a.stroke !== "none";
-    return (<svg stroke={withStroke ? "currentColor" : "none"} fill="currentColor" strokeWidth="0" {...svgProps} className={props.className} {...src.a} style={{
+    const [split, rest] = splitProps(props, ["src"]);
+    return (<svg stroke={split.src.a.stroke} fill="currentColor" strokeWidth="0" {...rest} className={rest.className} {...split.src.a} style={{
             overflow: "visible",
-            color: color,
-            ...props.style,
-        }} height={computedSize} width={computedSize} innerHTML={trimmedEl} xmlns="http://www.w3.org/2000/svg">
-      {title && <title>{title}</title>}
+            color: rest.color,
+            ...rest.style,
+        }} height={rest.size || "1em"} width={rest.size || "1em"} innerHTML={split.src.c} xmlns="http://www.w3.org/2000/svg">
+      {rest.title && <title>{rest.title}</title>}
     </svg>);
 }

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11645159

increased by2.44%

Lines of code

170287

increased by8.6%

Number of lines in readme file

91

increased by13.75%

Number of low supply chain risk alerts

677

decreased by-5.45%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes