This repository is distributed withnpm.Afterinstalling npm,you can install@wpmudev/sui-icons
with this command.
npm i --save-dev @wpmudev/sui-icons
There 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-icons
npm package in the URL like the following:
<img
width= "32"
height= "32"
src= "https://unpkg /@wpmudev/sui-icons/dist/svg/plugin-smartcrawl.svg"
alt= "SmartCrawl Plugin"/>
- Install the
@wpmudev/sui-icons
and in the<head>
of your HTML file, reference the location to yoursui-icons.css
stylesheet.
<head>
...
<linkrel= "stylesheet"href= "@wpmudev/sui-icons/dist/css/sui-icons.css"/>
...
</head>
- Useunpkgto load theShared UI Icons Packdirectly without installing anything:
<head>
...
<linkrel= "stylesheet"href= "https://unpkg /@wpmudev/sui-icons/dist/css/sui-icons.css"/>
...
</head>
Place the
suicons
class 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.