@withicons/soft3d

The soft3d style of with icons for all 750 icons: standalone SVG files and IconNode data, plus their CSS class icons, laid out like @withicons/core, which holds the older styles and the shared API (toSvg, resolve, search, metadata, palettes; its styles.json says which package holds each style). The newest styles have packages of their own because jsDelivr serves at most 150 MB per package.

npm i @withicons/core @withicons/soft3d

import { toSvg } from '@withicons/core'
import { Home } from '@withicons/soft3d'
toSvg(Home, 'soft3d', { size: 32, idSuffix: 'a' })   // gradients: give each inline copy its own idSuffix
import url from '@withicons/soft3d/svg/soft3d/home.svg'

CDN: https://cdn.jsdelivr.net/npm/@withicons/soft3d@latest/dist/svg/soft3d/home.svg

| path | contents | |---|---| | dist/svg/<style>/<name>.svg | standalone SVG (CSS variables flattened to their defaults) | | dist/nodes/<style>.js (.cjs) | IconNode data: one tree-shakable named export per icon plus nodes / default | | dist/classes/with-<style>.css, dist/classes/<style>/<name>.css | CSS class icons (<i class="with with-home with-soft3d">); the @withicons/classes loader finds them by itself |

Every framework package (@withicons/react, vue, svelte, angular, solid) and @withicons/web, @withicons/static hold every style, these included.

glass, clay, bento, suite, dock, liquid, chrome, soft3d, utsav, rangoli, halloween, christmas, lunar, valentine draw real SVG gradients: a <defs> of linearGradient / radialGradient whose stop colours are the same CSS variables, so palettes and --with-* overrides recolour them too. Every inline copy gets its own gradient ids (components, <with-icon>, with-icons.js), so one page can show the same icon many times in different colours. When you inline SVG strings yourself, pass idSuffix (toSvg in @withicons/core, svg / loadSvg in @withicons/web, render in @withicons/dynamic) with a different value per copy. Files and <img> need nothing.

MIT licensed. withicons.com · GitHub · Powered by Evergrow.