@patternfly/pfe-icon - npm Package Compare versions

Comparing version 1.12.3 to 2.0.0-next.0

package.json

 {
   "name": "@patternfly/pfe-icon",
-  "pfelement": {
-    "className": "PfeIcon",
-    "elementName": "pfe-icon",
-    "preview": "icon--screenshot.png"
+  "license": "MIT",
+  "version": "2.0.0-next.0",
+  "description": "Icon element for PatternFly Elements",
+  "customElements": "custom-elements.json",
+  "type": "module",
+  "main": "./pfe-icon.js",
+  "module": "./pfe-icon.js",
+  "types": "./pfe-icon.d.ts",
+  "exports": {
+    ".": {
+      "esbuild": "./pfe-icon.ts",
+      "default": "./pfe-icon.js"
+    },
+    "./*": {
+      "esbuild": "./*.ts",
+      "default": "./*.js"
+    }
   },
-  "version": "1.12.3",
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
-  "description": "Icon element for PatternFly Elements",
+  "scripts": {
+    "⚙️-----UTIL-------⚙️": "❓ Manages the repo",
+    "clean": "git clean -fX -e node_modules -e tsconfig.tsbuildinfo",
+    "🚚-----DIST-------🚚": "❓ Publish packages",
+    "prepublishOnly": "npm run build",
+    "👷‍♀️-----BUILD------👷‍♀️": "❓ Prepare dist artifacts",
+    "analyze": "cem analyze",
+    "build": "run-s build:*",
+    "build:clean": "npm run clean",
+    "build:esbuild": "node ../../scripts/build.js --include pfe-icon",
+    "build:analyze": "npm run analyze",
+    "build:types": "tsc -b .",
+    "🧑‍🔬-----TEST-------🧑‍🔬": "❓ Test packages",
+    "test": "wtr --files './test/*.spec.ts' --config ../../web-test-runner.config.js",
+    "👷‍♀️-----DEV--------👷‍♀️": "❓ Development aids",
+    "test:watch": "npm test -- --watch",
+    "watch:analyze": "npm run analyze -- --watch",
+    "watch:types": "tsc -w"
+  },
   "keywords": [
     "web-components",
+    "icon",
+    "svg",
     "html"
@@ -22,35 +55,26 @@ ],
   },
-  "browserslist": [
-    "last 2 versions",
-    "Firefox >= 78",
-    "iOS >= 8",
-    "ie 11"
-  ],
-  "main": "./dist/pfe-icon.umd.js",
-  "module": "./dist/pfe-icon.js",
-  "unpkg": "./dist/pfe-icon.umd.min.js",
+  "bugs": {
+    "url": "https://github.com/patternfly/patternfly-elements/issues"
+  },
   "files": [
-    "dist"
+    "!*.ts",
+    "custom-elements.json",
+    "**/*.LEGAL.txt",
+    "**/*.css",
+    "**/*.d.ts",
+    "**/*.js",
+    "**/*.js.map",
+    "!custom-elements-manifest.config.js",
+    "!demo/*",
+    "!docs/*",
+    "!test/*"
   ],
-  "scripts": {
-    "build": "../../node_modules/.bin/gulp && ../../node_modules/.bin/prettier --ignore-path ../../.prettierignore --write '**/*.{js,json}'",
-    "dev": "../../node_modules/.bin/gulp dev",
-    "watch": "../../node_modules/.bin/gulp watch",
-    "test": "../../node_modules/.bin/wct --configFile ../../wct.conf.json elements/pfe-icon/test/"
-  },
-  "author": {
-    "name": "Michael Clayton <[e-mail]>"
-  },
-  "license": "MIT",
-  "devDependencies": {
-    "@patternfly/pfe-sass": "^1.12.3"
-  },
+  "contributors": [
+    "Michael Clayton <[e-mail]>",
+    "Benny Powers <[e-mail]>"
+  ],
   "dependencies": {
-    "@patternfly/pfelement": "^1.12.3"
-  },
-  "generator-pfelement-version": "1.1.0",
-  "bugs": {
-    "url": "https://github.com/patternfly/patternfly-elements/issues"
-  },
-  "gitHead": "8cad71b1de7cb39aa77372fa8ae228b813e700c5"
+    "@patternfly/pfe-core": "^2.0.0-next.0",
+    "lit": "^2.1.2"
+  }
 }

README.md

@@ -1,3 +0,25 @@
-# PatternFly Elements | Icon Element
+# PatternFly Elements Icon
+     
+Read more about Icon in the [PatternFly Elements Icon documentation](https://patternflyelements.org/components/icon)
 
+##  Installation
+
+Load `<pfe-icon>` via CDN:
+
+```html
+<script src="https://unpkg.com/@patternfly/pfe-icon?module"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/pfe-icon
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/pfe-icon';
+```
+
 ## Usage
@@ -9,3 +31,3 @@
 
-## Slots
+### Fallback Content
 
@@ -15,20 +37,10 @@ There are no slots, but if you wish to display some text when JS is disabled, you can put some text inside the pfe-icon tag.  For instance, when using a checkmark icon in a server status table, you may wish to display "success" if JS is disabled.
 ```html
-<pfe-icon icon="rh-check-mark">success</pfe-icon>
+<pfe-icon icon="rh-check-mark">✅</pfe-icon>
 ```
 
+### Icon sets
 
-## Attributes
-
-| Name | Values | Description |
-| --- | --- | --- |
-| `icon` | `iconSet-iconName` | For example, `rh-leaf` loads a leaf icon from an icon set named "rh". |
-| `size` | `sm` `md` `lg` `xl` `1x` `2x` `3x` `4x` | The default size is 1em, so icon size matches text size.  `2x`, etc, are multiples of font size.  `sm`, `md`, etc are fixed pixel-based sizes. |
-| `color` | `base` `lightest` `lighter` `darker` `darkest` `complement` `accent` `accent` `critical` `important` `moderate` `success` `info` `default` | The color variant to use.  This draws from your theming layer to color the icon.  This will set icon color or background color (if `circled` is true). |
-| `circled` | boolean attribute | Whether to draw a circular background behind the icon. |
-
-## Icon sets
-
 Icon sets are defined in detail in [this blog post][icon-sets].  The blog post should eventually be absorbed into the official documentation.
 
-### Register a new icon set
+#### Register a new icon set
 
@@ -38,2 +50,4 @@ To register a new icon set, choose a global namespace for that set and identify the path at which the SVGs for that set will be hosted.  Consider also the function needed to convert the icon name into the filename on that hosted location.  The `addIconSet` call accepts the namespace (as a string), the path to the SVGs (as a string), and a function for parsing the icon name into the filename.
 ```javascript
+await customElements.whenDefined('pfe-icon');
+const PfeIcon = customElements.get('pfe-icon');
 PfeIcon.addIconSet(
@@ -50,3 +64,3 @@ "local",
 
-### Override the default icon sets
+#### Override the default icon sets
 
@@ -73,3 +87,3 @@ Out of the box, the default icon set (using the rh / web namespace) is hosted on [access.redhat.com](https://access.redhat.com). If you would like to override the `rh / web` namespace, you can add the following to a global variable named `PfeConfig`.
 
-Now when `pfe-icon` is used, it will automatically reference the icon set defined in the config.
+Now when `<pfe-icon>` is used, it will automatically reference the icon set defined in the config.
 
@@ -84,3 +98,3 @@ If you would like to opt out of any defaults so that you can dynamically add icon sets later using `PfeIcon.addIconSet()`, use the following:
 
-### Updating an existing icon set
+#### Updating an existing icon set
 
@@ -90,47 +104,4 @@ To updating an existing icon set, you use the same `addIconSet` function.  The first input which is the icon set namespace is required, as is the new path.  You can optionally pass in a new function for parsing the icon names into filenames.
 ```javascript
-    PfeIcon.addIconSet("local", "https://hosted-icons.com/");
+PfeIcon.addIconSet("local", "https://hosted-icons.com/");
 ```
 
-## Variables
-
-There are several powerful ways to hook into and override default styles.
-
-- Color: the `color` attribute is available to pull icon color from your theming layer.  For more fine-grained control, `--pfe-icon--color` is available to override the color of a specific icon or sets of icons and will be applied to the SVG.  [Examples][color-examples]
-- Background color: the `color` attribute is available to pull background color from your theming layer.  For more fine-grained control, `--pfe-icon--BackgroundColor` is available to override the background color of a specific icon or sets of icons.  Be sure to set `--pfe-icon--context` to the appropriate context if you are setting the background-color or use the more fine-grained `--pfe-icon--color` to set a specific color on the SVG lines.
-
-| Theme hook | Description | Default |
-| -------------- | ----------- | ------- |
-| `--pfe-icon--size` | The height and width of the icon | var(--pfe-theme--icon-size, 1em) |
-| `--pfe-icon--spacing` | | var(--pfe-theme--container-spacer, 1rem) |
-| `--pfe-icon--Padding` | Padding around the icon | 0 (when circled .5em) |
-| `--pfe-icon--BackgroundColor` | Background color for when the icon is circled | transparent |
-| `--pfe-icon--context` | Icon context when `--pfe-icon--BackgroundColor` is used | light |
-| `--pfe-icon--BorderColor` | Border color when icon is circled | var(--pfe-icon--BackgroundColor, transparent) |
-| `--pfe-icon--BorderWidth` | Thickness of the border when circled | var(--pfe-theme--ui--border-width, 1px) |
-| `--pfe-icon--color` | Sets the color of the SVG lines | var(--pfe-icon--Color, var(--pfe-broadcasted--text, #3c3f42)) |
-| *Deprecated* |
-| `--pfe-icon--Color` | Deprecated | var(--pfe-broadcasted--text, #3c3f42) |
-
-## Test
-
-    npm test
-
-## Build
-
-    npm run build
-
-## Demo
-
-From the PFElements root directory, run:
-
-    npm start
-
-## Code style
-
-All PFElements use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
-
-[prettier]: https://github.com/prettier/prettier/
-[prettier-ed]: https://prettier.io/docs/en/editors.html
-[blog]: https://clayto.com/2019/07/web-component-icons/index.html
-[icon-sets]: https://clayto.com/2019/07/web-component-icons/index.html#icon-sets
-[color-examples]: https://clayto.com/2019/07/web-component-icons/index.html#setting-icon-colors

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

0

decreased by-100%

Number of low supply chain risk alerts

0

decreased by-100%

Is type module

Yes

Worsened metrics

Total package byte prevSize

61155

decreased by-81.56%

Dependency count

2

increased by100%

Lines of code

661

decreased by-38.34%

Number of lines in readme file

101

decreased by-22.31%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@patternfly/pfe-core@^2.0.0-next.0

• + Addedlit@^2.1.2

• + Added@floating-ui/core@1.6.8(transitive)

• + Added@floating-ui/dom@1.6.12(transitive)

• + Added@floating-ui/utils@0.2.8(transitive)

• + Added@lit-labs/ssr-dom-shim@1.2.1(transitive)

• + Added@lit/reactive-element@1.6.3(transitive)

• + Added@patternfly/pfe-core@2.4.1(transitive)

• + Added@types/trusted-types@2.0.7(transitive)

• + Addedlit@2.8.0(transitive)

• + Addedlit-element@3.3.3(transitive)

• + Addedlit-html@2.8.0(transitive)

• - Removed@patternfly/pfelement@^1.12.3

• - Removed@patternfly/pfelement@1.12.3(transitive)