ProIcons HTML

ProIcons are designed to be easy to use inside of HTML.

Installation

Method 1: Use a CDN provider

The easiest way to install ProIcons is via a CDN provider such as UNPKG

<script src="https://unpkg.com/proicons"></script>

Method 2: Install locally

If you want to use ProIcons locally, you can also install ProIcons via NPM.

NPM

npm install proicons

Yarn

yarn add proicons

PNPM

pnpm add proicons

Bun

bun add proicons

Then import your proicons.js file in your HTML

<script src="path/to/proicons/dist/umd/proicons.cjs"></script>

Replace path/to/ with the actual path to your node_modules folder (relative to the HTML file).

Usage

ProIcons can be added via elements with the proicon attribute. Set the attribute value to the name of the icon you want to insert.

To insert an Add icon inside HTML:

<i proicon="add"></i>

Any case is supported, so all of these will work:

<i proicon="Add Square"></i>
<i proicon="AddSquare"></i>
<i proicon="AddSquareIcon"></i>
<i proicon="addSquare"></i>
<i proicon="add-square"></i>

Tip

The i element isn't mandatory, though the proicon attribute is. This can be customized in the configuration.

Then, add a script to replace these elements with SVGs.

<script>
    proicons.replace()
</script>

proicons.replace() replaces every element with a proicon attribute with their respective icon. It will replace the actual element (in the case shown above i) if it doesn't have children, or it will insert the icon inside it as the first element.

Attributes

ProIcons also can be customized via attributes. These can be applied to individual icon elements.

<i proicon="add" stroke-width="2" color="red"></i>

See Options for the list of properties.