This repository is distributed withnpm.Afterinstalling npm,you can install@wpmudev/sui-iconswith this command.
npm i --save-dev @wpmudev/sui-iconsThere are many ways/formats to use the Shared UI Icons Package. The fastest and recommended way is via SVG directly. Or use the Webfont version if you want to include all icons at once:
- Suppose you want to use just a few icons. Find the icons you need in the "icons" folder. Then use them as regular images:
<img
width= "32"
height= "32"
src= "@wpmudev/sui-icons/dist/svg/plugin-smartcrawl.svg"
alt= "SmartCrawl Plugin"/>- It's possible to serve the icons from a CDN such asUnpkg.Use the
@wpmudev/sui-iconsnpm package in the URL like the following:
<img
width= "32"
height= "32"
src= "https://unpkg.com/@wpmudev/sui-icons/dist/svg/plugin-smartcrawl.svg"
alt= "SmartCrawl Plugin"/>- Install the
@wpmudev/sui-iconsand in the<head>of your HTML file, reference the location to yoursui-icons.cssstylesheet.
<head>
...
<linkrel= "stylesheet"href= "@wpmudev/sui-icons/dist/css/sui-icons.css"/>
...
</head>- Useunpkg.comto load theShared UI Icons Packdirectly without installing anything:
<head>
...
<linkrel= "stylesheet"href= "https://unpkg.com/@wpmudev/sui-icons/dist/css/sui-icons.css"/>
...
</head>Place the
suiconsclass with<span>tag in your HTML file, like this. Then, use theicon namealong with thesuicons-class prefix.
<spanclass= "suicons suicons--plugin-smartcrawl"></span>If you have any ideas or found bugs, please send me Pull Requests or let me know withGitHub Issues.
We created theWPMU DEV Design Systemto build plugins and products forWPMU DEV,not on products outside the company. Please visit the terms of use for full license details.
New icons need to be added toSUI Icons Packfirst. Please, visit theSupportpage for more information on how to request it.
We can usually add an icon and release a new version on the same day if there is a hurry. However, remember that if there's a similar icon already available, we suggest you use it instead unless you request a design update.