@clayui/icon
Advanced tools
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';
<IconSearch iconLabelFormatter={(icon) => icon.aliases.join(' - ')} label="Search Flags" placeholder="Search Flags..." source={flags} />
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.
Add import { ClayIconSpriteContext } from "@clayui/icon" use the context as a provider. <ClayIconSpriteContext.Provider value="path/to/sprite.svg">.
3.39.0 (2021-10-29)
clay-div a function that uses / as a division operation if the function div() does not exist (87aec12)$dropdown-item-base keys to newer nested keys pattern and remove duplicate $dropdown-item-base (6fc1833)/ 2 to * 0.5 as work around for dart-sass deprecation message (aa74003)/ to multiplication as work around for dart-sass deprecation message (f9948ec)dropdown-menu::after padding hack for Firefox. This is no longer an issue. (54a0b08)$dropdown-item-base keys to newer nested keys pattern (502ea21)clay-dropdown-item-variant update to accept newer nested keys pattern and deprecate keys: (bcc0e89)clay-dropdown-menu-variant removes dropdown-menu::after padding hack for Firefox (a7e2c18)calc() for calculating widths and sizes instead of Sass division / and don't use Sass percentage function (1b2e127)yarn develop command of the clayui.com (fa0d8c0)heading, maps, order-ascending and order-descending SVG icons and update geolocation SVG icon (319f37f)custom-control, custom-checkbox, and custom-radio convert to using Sass map pattern (c8826b2)$cadmin-sticker-sizes Sass map to generate sticker sizes and use Sass placeholders for sticker sizes for easier extends (2630c54)custom-control, custom-checkbox, and custom-radio convert to using Sass map pattern (d60970d)clay-sticker-variant expand mixin to include most use cases in Clay and make it compatible with deprecated clay-sticker-size mixin (3e703ed)clay-custom-control-input-variant and clay-custom-control-variant mixins (3060c0b)clay-label-variant to provide selectors that are generated by clay-label-size (deprecated) and conver to using new Sass map key pattern while still supporting older key names (c0c9a1c)$sticker-sizes Sass map to generate sticker sizes and use Sass placeholders for sticker sizes for easier extends (2da3013)clay-sticker-variant and clay-css mixins for more customizability (f8adb74)sizing API to Select component (2c7848d)heading, maps, order-ascending, order-descending and geolocation SVG icons (a34f3be)FAQs
ClayIcon component
The npm package @clayui/icon receives a total of 1,813 weekly downloads. As such, @clayui/icon popularity was classified as popular.
We found that @clayui/icon demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 13 open source maintainers collaborating on the project.
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.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.
Security News
NIST's new password guidelines remove periodic changes and special character requirements, focusing on longer, more secure passwords for better authentication practices.