@clayui/icon

ClayIcon component

3.37.0
Source
npm

Version published: 3 years ago

Weekly downloads: 474; decreased by-80.37%

Maintainers: 16

Weekly downloads

Created: 5 years ago

Source

title: 'Icon' description: 'Icons are a visual representation of an idea and/or action.' lexiconDefinition: 'https://liferay.design/lexicon/core-components/icons/' packageNpm: '@clayui/icon'

import {Icon, IconWithContext} from '$packages/clay-icon/docs/index'; import IconSearch from '$clayui.com/src/components/IconSearch'; import icons from '$clayui.com/static/js/icons-autogenerated.json';

Icon List

Language Flags

<IconSearch iconLabelFormatter={(icon) => icon.aliases.join(' - ')} label="Search Flags" placeholder="Search Flags..." source={flags} />

Best Pratices

For Icons, we use SVG elements that link to an SVG sprite. So, it becomes necessary to pass a parameter that points to a path where this spritemap is located. If you are using the spritemap from @clayui/css you can download that svg here.

Using Context

For V3, an API was added to utilize context for passing spritemap down instead of having to pass the prop everywhere.

Add import { ClayIconSpriteContext } from "@clayui/icon" use the context as a provider. <ClayIconSpriteContext.Provider value="path/to/sprite.svg">.

3.37.0 (2021-10-06)

Bug Fixes

@clayui/core: fix drag layer position (37a2536)
@clayui/core: fix error when moving item up, down and add to children (f9fbe91)
@clayui/css: Alert update $alert-*-btn variant Sass maps to use newer keys (ecdd38a)
@clayui/css: Alerts allow better customization of alert variant components, use clay-alert-variant mixin to generate alert variant styles (9be70d7)
@clayui/css: Alerts and Cadmin Alerts alert-inline should have more space between text and top / bottom borders (29c4764)
@clayui/css: Atlas Alert changed back $alert-font-size to 0.875rem and change $alert-indicator-font-size to 1rem (21d33ed)
@clayui/css: Atlas and Cadmin Stickers swap background and foreground colors for sticker-light and sticker-dark (adcd19f)
@clayui/css: Cadmin Alert update $alert-*-btn variant Sass maps to use newer keys and update $cadmin-alert-palette to use $alert-* variant Sass maps (6a4a100)
@clayui/css: Cadmin Alerts allow better customization of alert variant components, use clay-alert-variant mixin to generate alert variant styles (3410faf)
@clayui/css: Cadmin Cards and Panels remove decision making if statements from border-radius and border-width. They were used to save a few bytes of CSS, not worth. (677e804)
@clayui/css: Cadmin Form Validation adds missing styles for .form-feedback-group, .form-feedback-item,.form-feedback-indicator, and .form-text (db26016), closes #4298
@clayui/css: Cadmin Forms fieldset[disabled] .form-control should use values from the $cadmin-input Sass map and move rule-set closer to the .form-control rule-set (0504ff2)
@clayui/css: Cadmin Forms label.disabled should use properties declared in $cadmin-input-label map and move the label.disabled rule-set closer to the label rule-set (d00b97b)
@clayui/css: Cards and Panels remove decision making if statements from border-radius and border-width. They were used to save a few bytes of CSS, not worth. (be44a21)
@clayui/css: Carousel, Custom Forms convert variables using Bootstrap's url("data:image/svg+xml,<svg></svg>") to use clay-svg-url (c1cd8a2)
@clayui/css: Form Validation use clay-form-control-variant to style Danger, Warning, Success readonly inputs instead of clay-button-variant (23ed8cb)
@clayui/css: Forms fieldset[disabled] .form-control should use values from the $input Sass map and move rule-set closer to the .form-control rule-set (9ffc635)
@clayui/css: Forms label.disabled should use properties declared in $input-label map and move the label.disabled rule-set closer to the label rule-set (0ea7c72)
@clayui/css: Global Functions math-sign should return a negative calc value if a CSS custom property is passed in (e824c5d)
@clayui/css: Global Functions deprecate Bootstrap's escape-svg function (e8ffa5d)
@clayui/css: Global Variables deprecate Bootstrap 4 $enable-hover-media-query, $caret-width, $caret-vertical-align, $caret-spacing, $emphasized-link-hover-darken-percentage (54d39f9)
@clayui/css: Global Variables deprecate Bootstrap's $escaped-characters variable (9b93ca0)
@clayui/css: Inverse Sass variable values should use the math-sign function (835a62a)
@clayui/css: Mixins Alerts adds clay-alert-variant mixin and deprecate Bootstrap's alert-variant mixin (a3f1722)
@clayui/form: change the Dual List Box ordering side following the right side as the default behavior (d4b9630)
@clayui/shared: fix error when controlling internal state using external value and internal controller (d17eba5)
clayui.com: add missing authors (dc1b787)

Features

@clayui/core: add initial dnd implementation for TreeView (fe1e286)
@clayui/core: adds the implementation of modifying the Tree by copying the partial structure (4b67f61)
@clayui/core: implement move functionality for tree (a0ea6e5)
@clayui/css: adds new classes treeview-dropping-bottom, treeview-dropping-inside and treeview-dropping-top (f0b4c5e)
@clayui/css: Alerts adds components .alert-inline, alert-autofit-stacked, alert-autofit-stacked-sm-down, alert-autofit-stacked-xs-down, alert-indicator-start (7738e78)
@clayui/css: Cadmin Alerts adds components .alert-inline, alert-autofit-stacked, alert-autofit-stacked-sm-down, alert-autofit-stacked-xs-down, alert-indicator-start (b60b0c7)
@clayui/css: Cadmin Form Validation adds $cadmin-input-danger, $cadmin-input-warning, $cadmin-input-success, $cadmin-input-danger-select, $cadmin-input-warning-select, $cadmin-input-success-select Sass maps with clay-form-control-variant and clay-select-variant for more customization options (df1e426)
@clayui/css: Form Validation adds $input-danger, $input-warning, $input-success, $input-danger-select, $input-warning-select, $input-success-select Sass maps with clay-form-control-variant and clay-select-variant for more customization options (c23c8f5)

BREAKING CHANGES

@clayui/css: sticker-light now has a light font color and sticker-dark has a dark font color. All instances of sticker-light should be updated to use sticker-dark and all instances of sticker-dark should be updated to use sticker-light. If you do not want to make this change in your markup, you can revert back to the original styles with:

$sticker-light-bg: $dark !default;
$sticker-light-color: $white !default;

$sticker-dark-bg: $dark !default;
$sticker-dark-color: $white !default;

See issue https://github.com/liferay/clay/issues/4310 for more context.

Keywords

FAQs

What is @clayui/icon?

Is @clayui/icon popular?

Is @clayui/icon well maintained?

Package last updated on 06 Oct 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install