New version of Iconify icon sets website is now live.
This is a major rewrite, focusing on fixing user experience.
Main changes:
More details about new features later.
This change applies to all SVG + CSS component packages:
Now it is possible to customise icons using CSS variables, without editing icons.
You can change:
Variables are generated based on icon content (see examples below):
Variable names are generated from original value in lower case, replacing:
Examples:
Usage examples with usable CSS:
Example customising stroke width in Tabler Icons:
csssvg {
/* replace 2px stroke width with 1.5px */
--svg-stroke-width--2px: 1.5px;
}
Example customising opacity in two tone Google Material Icons:
csssvg {
/* replace 0.3 with 0.5 */
--svg-opacity--0-3: 0.5;
}
Example customising opacity in two tone IconaMoon:
csssvg {
/* replace 0.15 with 0.4 */
--svg-opacity--0-16: 0.4;
}
Example customising colors in Freehand color icons:
csssvg {
/* replace blue color */
--svg-color--0c6fff: red;
/* replace black color */
--svg-color--020202: currentColor;
}
Where to see actual variables used in a specific icon?
Currently the only way is to inspect icon in browser or editor.
Soon you will be able to do that on Iconify icon sets website.
Following a set of Vue, Svelte and React components, new easy to use icon components for SolidJS have been published.
See SVG + CSS for SolidJS for details.
There are over 200 icon component packages, one per icon set:
... and so on.
To import an icon component, import default item from @iconify-solid/prefix/icon where "prefix" is icon set prefix, "icon" is icon name.
Example:
jsximport GithubIcon from "@iconify-solid/ri/github-line";
function GithubLink() {
return (
<a href="https://github.com/iconify">
<GithubIcon height="1em" />
</a>
);
}
These packages will be automatically updated when Iconify icon sets are updated.
Following a set of Vue and Svelte components, new easy to use icon components for React have been published.
See SVG + CSS for React for details.
There are over 200 icon component packages, one per icon set:
... and so on.
To import an icon component, import default item from @iconify-react/prefix/icon where "prefix" is icon set prefix, "icon" is icon name.
Example:
jsximport GithubIcon from "@iconify-react/ri/github-line";
function GithubLink() {
return (
<a href="https://github.com/iconify">
<GithubIcon height="1em" />
</a>
);
}
These packages will be automatically updated when Iconify icon sets are updated.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。