Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@astrouxds/rux-icon
Advanced tools
@astrouxds/rux-icon - npm Package Compare versions
Comparing version 5.0.2 to 5.3.0
| { | ||
| "author": { | ||
| "name": "Rocket Communications", | ||
| "email": "uxsupport@rocketcom.com" | ||
| }, | ||
| "dependencies": { | ||
| "@webcomponents/webcomponentsjs": "^2.2.10", | ||
| "lit-element": "^2.1.0" | ||
| }, | ||
| "homepage": "https://www.astrouxds.com", | ||
| "bugs": { | ||
| "email": "uxsupport@rocketcom.com", | ||
| "url": "https://github.com/RocketCommunicationsInc/astro-components/issues" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/RocketCommunicationsInc/astro-components/src/master" | ||
| }, | ||
| "description": "Astro Web Component for Icons", | ||
| "license": "SEE LICENSE IN LICENSE.md", | ||
| "main": "rux-icon.js", | ||
| "module": "rux-icon.js", | ||
| "name": "@astrouxds/rux-icon", | ||
| "scripts": { | ||
| "test": "echo \"Error: no test specified\" && exit 1", | ||
| "prepublish": "gulp rux-icon-svg" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "version": "5.0.2", | ||
| "gitHead": "1baa15908593f0e6452e8283be1e279a05862079" | ||
| "author": { | ||
| "name": "Rocket Communications", | ||
| "email": "uxsupport@rocketcom.com" | ||
| }, | ||
| "dependencies": { | ||
| "@webcomponents/webcomponentsjs": "^2.2.10", | ||
| "lit-element": "^2.1.0" | ||
| }, | ||
| "homepage": "https://www.astrouxds.com", | ||
| "bugs": { | ||
| "email": "uxsupport@rocketcom.com", | ||
| "url": "https://github.com/RocketCommunicationsInc/astro-components/issues" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/RocketCommunicationsInc/astro-components/src/master" | ||
| }, | ||
| "description": "Astro Web Component for Icons", | ||
| "license": "SEE LICENSE IN LICENSE.md", | ||
| "main": "rux-icon.js", | ||
| "module": "rux-icon.js", | ||
| "name": "@astrouxds/rux-icon", | ||
| "scripts": { | ||
| "test": "echo \"Error: no test specified\" && exit 1", | ||
| "prepublish": "gulp rux-icon-svg" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "version": "5.3.0", | ||
| "gitHead": "4bba0d8002ae689eae718e188328d4e564aa94b0" | ||
| } |
@@ -7,3 +7,3 @@ # Icons | ||
| - [Astro UXDS: Icons and Symbols](https://astrouxds.com/ui-components/icons-and-symbols) | ||
| - [Astro UXDS: Icons and Symbols](https://astrouxds.com/ui-components/icons-and-symbols) | ||
@@ -41,3 +41,3 @@ ## Installation | ||
| ```javascript | ||
| import { RuxIcon } from "@astrouxds/rux-icon/rux-icon.js"; | ||
| import { RuxIcon } from '@astrouxds/rux-icon/rux-icon.js' | ||
| ``` | ||
@@ -84,7 +84,7 @@ | ||
| - Removed the `namespace:icon` pattern in favor of supporting multiple libraries, both default (Astro) and external, adding the `library` property (see [Astro 4 migration note](#astro-4-migration) below) | ||
| - Replaced the DOM manipulation library for loading icons in favor of an HTML5 template TODO: add support for template outside of WebComponents when browser’s support shadowDOM piercing | ||
| - Moved Astro Status Icons to their own package, `rux-status` | ||
| - Replaced [Polymer 3](https://www.polymer-project.org) implementation with [LitElement](https://lit-element.polymer-project.org/) for improved speed and interoperability with JS Frameworks as well as simpler template declaration now available in vanilla JavaScript. | ||
| - Extended icon set with Google Material Design icons. License: https://github.com/google/material-design-icons/blob/master/LICENSE | ||
| - Removed the `namespace:icon` pattern in favor of supporting multiple libraries, both default (Astro) and external, adding the `library` property (see [Astro 4 migration note](#astro-4-migration) below) | ||
| - Replaced the DOM manipulation library for loading icons in favor of an HTML5 template TODO: add support for template outside of WebComponents when browser’s support shadowDOM piercing | ||
| - Moved Astro Status Icons to their own package, `rux-status` | ||
| - Replaced [Polymer 3](https://www.polymer-project.org) implementation with [LitElement](https://lit-element.polymer-project.org/) for improved speed and interoperability with JS Frameworks as well as simpler template declaration now available in vanilla JavaScript. | ||
| - Extended icon set with Google Material Design icons. License: https://github.com/google/material-design-icons/blob/master/LICENSE | ||
@@ -91,0 +91,0 @@ <a name="astro-4-migration"> |
180
rux-icon.js
@@ -1,109 +0,109 @@ | ||
| import { LitElement, html } from 'lit-element'; | ||
| import { directive } from 'lit-html'; | ||
| import { LitElement, html } from 'lit-element' | ||
| import { directive } from 'lit-html' | ||
| const getIcon = directive((library, icon) => (part) => { | ||
| try { | ||
| part.setValue(`${library}#${icon}`); | ||
| } catch (error) { | ||
| throw error; | ||
| } | ||
| }); | ||
| try { | ||
| part.setValue(`${library}#${icon}`) | ||
| } catch (error) { | ||
| throw error | ||
| } | ||
| }) | ||
| export class RuxIcon extends LitElement { | ||
| static get properties() { | ||
| return { | ||
| icon: { | ||
| type: String, | ||
| }, | ||
| size: { | ||
| type: String, | ||
| }, | ||
| color: { | ||
| type: String, | ||
| }, | ||
| library: { | ||
| type: String, | ||
| }, | ||
| label: { | ||
| type: String, | ||
| }, | ||
| viewBox: { | ||
| type: String, | ||
| }, | ||
| }; | ||
| } | ||
| static get properties() { | ||
| return { | ||
| icon: { | ||
| type: String, | ||
| }, | ||
| size: { | ||
| type: String, | ||
| }, | ||
| color: { | ||
| type: String, | ||
| }, | ||
| library: { | ||
| type: String, | ||
| }, | ||
| label: { | ||
| type: String, | ||
| }, | ||
| viewBox: { | ||
| type: String, | ||
| }, | ||
| } | ||
| } | ||
| constructor() { | ||
| super(); | ||
| constructor() { | ||
| super() | ||
| this.library = './icons/astro.svg'; | ||
| /* TODO: a non-presumptive way to assign a better default label if the user doesn’t provide one */ | ||
| this.label = 'icon'; | ||
| this.viewBox = '0 0 24 24'; | ||
| } | ||
| this.library = './icons/astro.svg' | ||
| /* TODO: a non-presumptive way to assign a better default label if the user doesn’t provide one */ | ||
| this.label = 'icon' | ||
| this.viewBox = '0 0 24 24' | ||
| } | ||
| firstUpdated() { | ||
| this.style.setProperty('--iconColor', this.color); | ||
| } | ||
| firstUpdated() { | ||
| this.style.setProperty('--iconColor', this.color) | ||
| } | ||
| updated(changedProperties) { | ||
| if (changedProperties.get('color')) { | ||
| this.style.setProperty('--iconColor', this.color); | ||
| updated(changedProperties) { | ||
| if (changedProperties.get('color')) { | ||
| this.style.setProperty('--iconColor', this.color) | ||
| } | ||
| } | ||
| } | ||
| render() { | ||
| return html` | ||
| <style> | ||
| :host { | ||
| --iconDefaultSize: 2.7rem; | ||
| --iconColor: var(--iconDefaultColor); | ||
| render() { | ||
| return html` | ||
| <style> | ||
| :host { | ||
| --iconDefaultSize: 2.7rem; | ||
| --iconColor: var(--iconDefaultColor); | ||
| display: inline-block; | ||
| display: inline-block; | ||
| height: var(--iconDefaultSize); | ||
| width: var(--iconDefaultSize); | ||
| } | ||
| height: var(--iconDefaultSize); | ||
| width: var(--iconDefaultSize); | ||
| } | ||
| svg, | ||
| svg > use { | ||
| height: 100%; | ||
| width: auto; | ||
| fill: var(--iconColor); | ||
| } | ||
| svg, | ||
| svg > use { | ||
| height: 100%; | ||
| width: auto; | ||
| fill: var(--iconColor); | ||
| } | ||
| :host([size='extra-small']) { | ||
| height: 1rem; | ||
| width: 1rem; | ||
| } | ||
| :host([size='extra-small']) { | ||
| height: 1rem; | ||
| width: 1rem; | ||
| } | ||
| :host([size='small']) { | ||
| height: 2rem; | ||
| width: 2rem; | ||
| } | ||
| :host([size='small']) { | ||
| height: 2rem; | ||
| width: 2rem; | ||
| } | ||
| :host([size='large']) { | ||
| height: 4rem; | ||
| width: 4rem; | ||
| } | ||
| :host([size='large']) { | ||
| height: 4rem; | ||
| width: 4rem; | ||
| } | ||
| :host([size="base"]) { | ||
| height: 24px; | ||
| width: auto; | ||
| } | ||
| </style> | ||
| :host([size='base']) { | ||
| height: 24px; | ||
| width: auto; | ||
| } | ||
| </style> | ||
| <span id="rux-icon"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="${this.viewBox}" | ||
| preserveAspectRatio="xMidYMid meet" | ||
| focusable="false" | ||
| > | ||
| <use href="${getIcon(this.library, this.icon)}"></use> | ||
| </svg> | ||
| </span> | ||
| `; | ||
| } | ||
| <span id="rux-icon"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="${this.viewBox}" | ||
| preserveAspectRatio="xMidYMid meet" | ||
| focusable="false" | ||
| > | ||
| <use href="${getIcon(this.library, this.icon)}"></use> | ||
| </svg> | ||
| </span> | ||
| ` | ||
| } | ||
| } | ||
| customElements.define('rux-icon', RuxIcon); | ||
| customElements.define('rux-icon', RuxIcon) |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No License Found
License(Experimental) License information could not be found.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Unidentified License
License(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.
Found 1 instance in 1 package
Improved metrics
- License quality
- increased by25%
100
Worsened metrics
- Total package byte prevSize
- decreased by-0.47%
465874
- Number of package files
- decreased by-20%
4
No dependency changes