Icons โ
Slidev allows you to have access to virtually all open-source icon sets directly in your markdown after installing the corresponding package. Powered by unplugin-icons and Iconify.
The naming follows Iconify's convention of {collection-name}-{icon-name}. For example:
<mdi-account-circle />- from Material Design Icons -@iconify-json/mdi<carbon-badge />- from Carbon -@iconify-json/carbon<uim-rocket />- from Unicons Monochrome -@iconify-json/uim<twemoji-cat-with-tears-of-joy />- from Twemoji -@iconify-json/twemoji<logos-vue />- from SVG Logos -@iconify-json/logos- And much more...
bash
pnpm add @iconify-json/[the-collection-you-want]bash
npm install @iconify-json/[the-collection-you-want]bash
yarn add @iconify-json/[the-collection-you-want]bash
bun add @iconify-json/[the-collection-you-want]bash
deno add jsr:@iconify-json/[the-collection-you-want]We use Iconify as our data source of icons. You need to install the corresponding icon-set in dependencies by following the @iconify-json/* pattern. For example, @iconify-json/mdi for Material Design Icons, @iconify-json/tabler for Tabler. You can refer to Icรดnes or Iconify for all the collections available.
Styling Icons โ
You can style the icons just like other HTML elements. For example:
html
<uim-rocket />
<uim-rocket class="text-3xl text-red-400 mx-2" />
<uim-rocket class="text-3xl text-orange-400 animate-ping" />