Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/vaadin-icon

Package Overview
Dependencies
Maintainers
19
Versions
209
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/vaadin-icon - npm Package Compare versions

Comparing version 22.0.0-alpha1 to 22.0.0-alpha10

49

package.json
{
"name": "@vaadin/vaadin-icon",
"version": "22.0.0-alpha1",
"version": "22.0.0-alpha10",
"publishConfig": {
"access": "public"
},
"description": "Web component for creating SVG icons",
"license": "Apache-2.0",
"repository": {
"type": "git",
"url": "https://github.com/vaadin/web-components.git",
"directory": "packages/vaadin-icon"
},
"author": "Vaadin Ltd",
"homepage": "https://vaadin.com/components",
"bugs": {
"url": "https://github.com/vaadin/web-components/issues"
},
"main": "vaadin-icon.js",
"module": "vaadin-icon.js",
"repository": "vaadin/web-components",
"files": [
"src",
"theme",
"vaadin-*.d.ts",
"vaadin-*.js"
],
"keywords": [

@@ -14,28 +33,6 @@ "Vaadin",

],
"author": "Vaadin Ltd",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/vaadin/web-components/issues"
},
"homepage": "https://vaadin.com/components",
"files": [
"vaadin-*.d.ts",
"vaadin-*.js",
"src",
"theme"
],
"dependencies": {
"@polymer/polymer": "^3.0.0",
"@vaadin/vaadin-element-mixin": "^22.0.0-alpha1",
"@vaadin/vaadin-lumo-styles": "^22.0.0-alpha1",
"@vaadin/vaadin-themable-mixin": "^22.0.0-alpha1",
"lit": "^2.0.0-rc.1"
"@vaadin/icon": "22.0.0-alpha10"
},
"devDependencies": {
"@vaadin/testing-helpers": "^0.2.1"
},
"publishConfig": {
"access": "public"
},
"gitHead": "c9694d6549bff1f7fffb9ece26178e57fc228a51"
"gitHead": "6d3055383b9c3c8306ea34c6f2e2087e63c49348"
}

7

README.md

@@ -6,2 +6,3 @@ # <vaadin-icon>

[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-icon)](https://www.npmjs.com/package/@vaadin/vaadin-icon)
[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)

@@ -46,9 +47,5 @@ ```html

## Big Thanks
Cross-browser Testing Platform and Open Source <3 Provided by [Sauce Labs](https://saucelabs.com).
## Contributing
To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first.
Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

@@ -55,0 +52,0 @@ ## License

30

src/vaadin-icon-svg.d.ts

@@ -1,28 +0,6 @@

import { nothing, SVGTemplateResult } from 'lit';
export type IconSvgLiteral = SVGTemplateResult | typeof nothing;
/**
* Clone given node and return its content as SVG literal.
* @license
* Copyright (c) 2021 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
export function cloneSvgNode(source: Element): IconSvgLiteral;
/**
* Test if the given argument is a valid SVG literal.
*/
export function isValidSvg(source: unknown): source is IconSvgLiteral;
/**
* Create a valid SVG literal based on the argument.
*/
export function ensureSvgLiteral(source: unknown): IconSvgLiteral;
/**
* Render a given SVG literal to the container.
*/
export function renderSvg(source: unknown, container: SVGElement): void;
/**
* Create an SVG literal from source string.
*/
export function unsafeSvgLiteral(source: string): IconSvgLiteral;
export * from '@vaadin/icon/src/vaadin-icon-svg.js';

65

src/vaadin-icon-svg.js

@@ -6,65 +6,2 @@ /**

*/
import { nothing, render, svg } from 'lit';
import { isTemplateResult, TemplateResultType } from 'lit/directive-helpers.js';
import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
/**
* Clone given node and return its content as SVG literal.
*
* @param {Element} source
*/
export function cloneSvgNode(source) {
let result = nothing;
if (source) {
const content = source.cloneNode(true);
content.removeAttribute('id');
result = svg`${unsafeSVG(content.innerHTML)}`;
}
return result;
}
/**
* Test if the given argument is a valid SVG literal.
*
* @param {unknown} source
*/
export function isValidSvg(source) {
return isTemplateResult(source, TemplateResultType.SVG) || source === nothing;
}
/**
* Create a valid SVG literal based on the argument.
*
* @param {unknown} svg
*/
export function ensureSvgLiteral(source) {
let result = source == null || source === '' ? nothing : source;
if (!isValidSvg(result)) {
console.error('[vaadin-icon] Invalid svg passed, please use Lit svg literal.');
result = nothing;
}
return result;
}
/**
* Render a given SVG literal to the container.
*
* @param {unknown} source
* @param {SVGElement} container
*/
export function renderSvg(source, container) {
const result = ensureSvgLiteral(source);
render(result, container);
}
/**
* Create an SVG literal from source string.
*
* @param {string} source
*/
export function unsafeSvgLiteral(source) {
return svg`${unsafeSVG(source)}`;
}
export * from '@vaadin/icon/src/vaadin-icon-svg.js';

82

src/vaadin-icon.d.ts

@@ -1,74 +0,18 @@

import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import { IconSvgLiteral } from './vaadin-icon-svg.js';
/**
* @license
* Copyright (c) 2021 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { Icon } from '@vaadin/icon/src/vaadin-icon.js';
/**
* `<vaadin-icon>` is a Web Component for creating SVG icons.
*
* ### Icon property
*
* The `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.
* For example, you can use it with `vaadin-icons` like this:
*
* ```html
* <vaadin-icon icon="vaadin:angle-down"></vaadin-icon>
* ```
*
* Alternatively, you can also pick one of the Lumo icons:
*
* ```html
* <vaadin-icon icon="lumo:user"></vaadin-icon>
* ```
*
* ### Custom SVG icon
*
* Alternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`
* literal using the [`svg`](#/elements/vaadin-icon#property-svg) property. In this case you can also
* define the size of the SVG `viewBox` using the [`size`](#/elements/vaadin-icon#property-size) property:
*
* ```js
* import { html, svg } from 'lit';
*
* // in your component
* render() {
* const svgIcon = svg`<path d="M13 4v2l-5 5-5-5v-2l5 5z"></path>`;
* return html`
* <vaadin-icon
* .svg="${svgIcon}"
* size="16"
* ></vaadin-icon>
* `;
* }
* ```
* @deprecated Import `Icon` from `@vaadin/icon` instead.
*/
declare class IconElement extends ThemableMixin(ElementMixin(HTMLElement)) {
/**
* The name of the icon to use. The name should be of the form:
* `iconset_name:icon_name`. When using `vaadin-icons` it is possible
* to omit the first part and only use `icon_name` as a value.
*
* Setting the `icon` property updates the `svg` and `size` based on the
* values provided by the corresponding `vaadin-iconset` element.
*
* See also [`name`](#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.
*/
icon: string | null;
export type IconElement = Icon;
/**
* The SVG icon wrapped in a Lit template literal.
*/
svg: IconSvgLiteral | null;
/**
* @deprecated Import `Icon` from `@vaadin/icon` instead.
*/
export const IconElement: typeof Icon;
/**
* The size of an icon, used to set the `viewBox` attribute.
*/
size: number;
}
declare global {
interface HTMLElementTagNameMap {
'vaadin-icon': IconElement;
}
}
export { IconElement };
export * from '@vaadin/icon/src/vaadin-icon.js';

221

src/vaadin-icon.js

@@ -6,222 +6,9 @@ /**

*/
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import { IconsetElement } from './vaadin-iconset.js';
import { ensureSvgLiteral, renderSvg } from './vaadin-icon-svg.js';
import { Icon } from '@vaadin/icon/src/vaadin-icon.js';
const DEFAULT_ICONSET = 'vaadin';
/**
* `<vaadin-icon>` is a Web Component for creating SVG icons.
*
* ### Icon property
*
* The `<vaadin-icon>` component is designed to be used as a drop-in replacement for `<iron-icon>`.
* For example, you can use it with `vaadin-icons` like this:
*
* ```html
* <vaadin-icon icon="vaadin:angle-down"></vaadin-icon>
* ```
*
* Alternatively, you can also pick one of the Lumo icons:
*
* ```html
* <vaadin-icon icon="lumo:user"></vaadin-icon>
* ```
*
* ### Custom SVG icon
*
* Alternatively, instead of selecting an icon from an iconset by name, you can pass any custom `svg`
* literal using the [`svg`](#/elements/vaadin-icon#property-svg) property. In this case you can also
* define the size of the SVG `viewBox` using the [`size`](#/elements/vaadin-icon#property-size) property:
*
* ```js
* import { html, svg } from 'lit';
*
* // in your component
* render() {
* const svgIcon = svg`<path d="M13 4v2l-5 5-5-5v-2l5 5z"></path>`;
* return html`
* <vaadin-icon
* .svg="${svgIcon}"
* size="16"
* ></vaadin-icon>
* `;
* }
* ```
*
* @extends HTMLElement
* @mixes ThemableMixin
* @mixes ElementMixin
* @deprecated Import `Icon` from `@vaadin/icon` instead.
*/
class IconElement extends ThemableMixin(ElementMixin(PolymerElement)) {
static get template() {
return html`
<style>
:host {
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
vertical-align: middle;
width: 24px;
height: 24px;
fill: currentColor;
}
export const IconElement = Icon;
:host([hidden]) {
display: none !important;
}
svg {
display: block;
width: 100%;
height: 100%;
}
</style>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="[[__computeViewBox(size)]]"
preserveAspectRatio="xMidYMid meet"
></svg>
`;
}
static get is() {
return 'vaadin-icon';
}
static get version() {
return '22.0.0-alpha1';
}
static get properties() {
return {
/**
* The name of the icon to use. The name should be of the form:
* `iconset_name:icon_name`. When using `vaadin-icons` it is possible
* to omit the first part and only use `icon_name` as a value.
*
* Setting the `icon` property updates the `svg` and `size` based on the
* values provided by the corresponding `vaadin-iconset` element.
*
* See also [`name`](#/elements/vaadin-iconset#property-name) property of `vaadin-iconset`.
*/
icon: {
type: String,
observer: '__iconChanged'
},
/**
* The SVG icon wrapped in a Lit template literal.
*/
svg: {
type: Object
},
/**
* The size of an icon, used to set the `viewBox` attribute.
*/
size: {
type: Number,
value: 24
},
/** @private */
__svgElement: Object
};
}
static get observers() {
return ['__svgChanged(svg, __svgElement)'];
}
constructor() {
super();
this.__onIconsetRegistered = this.__onIconsetRegistered.bind(this);
}
/** @protected */
ready() {
super.ready();
this.__svgElement = this.shadowRoot.querySelector('svg');
}
/** @private */
__getIconsetName(icon) {
if (!icon) {
return;
}
const parts = icon.split(':');
return parts[0] || DEFAULT_ICONSET;
}
/** @private */
__onIconsetRegistered(e) {
if (e.detail === this.__getIconsetName(this.icon)) {
this.__iconChanged(this.icon);
}
}
connectedCallback() {
super.connectedCallback();
document.addEventListener('vaadin-iconset-registered', this.__onIconsetRegistered);
}
disconnectedCallback() {
super.disconnectedCallback();
document.removeEventListener('vaadin-iconset-registered', this.__onIconsetRegistered);
}
/** @private */
__iconChanged(icon) {
if (icon) {
this.__checkDeprecatedIcon(icon);
const iconsetName = this.__getIconsetName(icon);
const iconset = IconsetElement.getIconset(iconsetName);
const { svg, size } = iconset.applyIcon(icon);
if (size !== this.size) {
this.size = size;
}
this.svg = svg;
} else {
this.svg = ensureSvgLiteral(null);
}
}
/** @private */
__checkDeprecatedIcon(icon) {
const deprecatedIcons = {
'vaadin:buss': 'vaadin:bus',
'vaadin:funcion': 'vaadin:function',
'vaadin:megafone': 'vaadin:megaphone',
'vaadin:palete': 'vaadin:palette',
'vaadin:trendind-down': 'vaadin:trending-down'
};
if (icon in deprecatedIcons) {
console.warn(`WARNING: The icon "${icon}" is deprecated. Use "${deprecatedIcons[icon]}" instead`);
}
}
/** @private */
__svgChanged(svg, svgElement) {
if (!svgElement) {
return;
}
renderSvg(svg, svgElement);
}
/** @private */
__computeViewBox(size) {
return `0 0 ${size} ${size}`;
}
}
customElements.define(IconElement.is, IconElement);
export { IconElement };
export * from '@vaadin/icon/src/vaadin-icon.js';

50

src/vaadin-iconset.d.ts

@@ -1,42 +0,18 @@

import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import { IconSvgLiteral } from './vaadin-icon-svg.js';
/**
* @license
* Copyright (c) 2021 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { Iconset } from '@vaadin/icon/src/vaadin-iconset.js';
/**
* `<vaadin-iconset>` is a Web Component for creating SVG icon collections.
* @deprecated Import `Iconset` from `@vaadin/icon/vaadin-iconset` instead.
*/
declare class IconsetElement extends ElementMixin(HTMLElement) {
/**
* Create an instance of the iconset.
*/
static getIconset(name: string): IconsetElement;
export type IconsetElement = Iconset;
/**
* The name of the iconset. Every iconset is required to have its own unique name.
* All the SVG icons in the iconset must have IDs conforming to its name.
*
* See also [`name`](#/elements/vaadin-icon#property-name) property of `vaadin-icon`.
*/
name: string;
/**
* @deprecated Import `Iconset` from `@vaadin/icon/vaadin-iconset` instead.
*/
export const IconsetElement: typeof Iconset;
/**
* The size of an individual icon. Note that icons must be square.
*
* When using `vaadin-icon`, the size of the iconset will take precedence
* over the size defined by the user to ensure correct appearance.
*/
size: number;
/**
* Produce SVGTemplateResult for the element matching `name` in this
* iconset, or `undefined` if there is no matching element.
*/
applyIcon(name: string): { svg: IconSvgLiteral; size: number };
}
declare global {
interface HTMLElementTagNameMap {
'vaadin-iconset': IconsetElement;
}
}
export { IconsetElement };
export * from '@vaadin/icon/src/vaadin-iconset.js';

120

src/vaadin-iconset.js

@@ -6,121 +6,9 @@ /**

*/
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import { cloneSvgNode } from './vaadin-icon-svg.js';
import { Iconset } from '@vaadin/icon/src/vaadin-iconset.js';
const iconRegistry = {};
/**
* `<vaadin-iconset>` is a Web Component for creating SVG icon collections.
*
*
*
* @extends HTMLElement
* @mixes ElementMixin
* @deprecated Import `Iconset` from `@vaadin/icon/vaadin-iconset` instead.
*/
class IconsetElement extends ElementMixin(PolymerElement) {
static get template() {
return null;
}
export const IconsetElement = Iconset;
static get is() {
return 'vaadin-iconset';
}
static get version() {
return '22.0.0-alpha1';
}
static get properties() {
return {
/**
* The name of the iconset. Every iconset is required to have its own unique name.
* All the SVG icons in the iconset must have IDs conforming to its name.
*
* See also [`name`](#/elements/vaadin-icon#property-name) property of `vaadin-icon`.
*/
name: {
type: String,
observer: '__nameChanged'
},
/**
* The size of an individual icon. Note that icons must be square.
*
* When using `vaadin-icon`, the size of the iconset will take precedence
* over the size defined by the user to ensure correct appearance.
*/
size: {
type: Number,
value: 24
}
};
}
/**
* Create an instance of the iconset.
*
* @param {string} name
*/
static getIconset(name) {
let iconset = iconRegistry[name];
if (!iconset) {
iconset = document.createElement('vaadin-iconset');
iconset.name = name;
iconRegistry[name] = iconset;
}
return iconset;
}
/** @protected */
connectedCallback() {
super.connectedCallback();
this.style.display = 'none';
}
/**
* Produce SVGTemplateResult for the element matching `name` in this
* iconset, or `undefined` if there is no matching element.
*
* @param {string} name
*/
applyIcon(name) {
// create the icon map on-demand, since the iconset itself has no discrete
// signal to know when it's children are fully parsed
this._icons = this._icons || this.__createIconMap();
return { svg: cloneSvgNode(this._icons[this.__getIconId(name)]), size: this.size };
}
/**
* Create a map of child SVG elements by id.
*/
__createIconMap() {
const icons = {};
this.querySelectorAll('[id]').forEach((icon) => {
icons[this.__getIconId(icon.id)] = icon;
});
return icons;
}
/** @private */
__getIconId(id) {
return (id || '').replace(`${this.name}:`, '');
}
/** @private */
__nameChanged(name, oldName) {
if (oldName) {
iconRegistry[name] = IconsetElement.getIconset(oldName);
delete iconRegistry[oldName];
}
if (name) {
iconRegistry[name] = this;
document.dispatchEvent(new CustomEvent('vaadin-iconset-registered', { detail: name }));
}
}
}
customElements.define(IconsetElement.is, IconsetElement);
export { IconsetElement };
export * from '@vaadin/icon/src/vaadin-iconset.js';

3

theme/lumo/vaadin-icon.js

@@ -1,2 +0,1 @@

import './vaadin-icon-styles.js';
import '../../src/vaadin-icon.js';
import '@vaadin/icon/theme/lumo/vaadin-icon.js';

3

theme/material/vaadin-icon.js

@@ -1,2 +0,1 @@

import './vaadin-icon-styles.js';
import '../../src/vaadin-icon.js';
import '@vaadin/icon/theme/material/vaadin-icon.js';
theme/lumo/vaadin-icon-styles.js
theme/material/vaadin-icon-styles.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc