Detalhes do pacote

@pine-ds/icons

Kajabi990MIT9.6.2

Pine Icon Library

icon, icon library, pine, svg

readme (leia-me)

Pine Icon Library

A simple way to add beautiful icons to your web projects using Kajabi's Pine Design System. These icons work in any modern browser and are easy to customize.

npm version

What's Included

  • Ready-to-use SVG icons that load fast
  • Works in any modern browser
  • Easy to change colors and sizes
  • Works with TypeScript
  • Built for accessibility

Quick Start

Choose one of these two simple ways to start:

1. Direct Browser Use (No Framework Needed)

Add this line to your HTML:

<script type="module" src="https://cdn.jsdelivr.net/npm/@pine-ds/icons@latest/dist/pds-icons/pds-icons.esm.js"></script>

How to Use Icons

Basic Example

<pds-icon name="icon-name"></pds-icon>

Customize Your Icons

Change the size:

<!-- Using preset sizes -->
<pds-icon name="icon-name" size="small"></pds-icon>     <!-- 12px -->
<pds-icon name="icon-name" size="regular"></pds-icon>   <!-- 16px -->
<pds-icon name="icon-name" size="medium"></pds-icon>    <!-- 20px -->
<pds-icon name="icon-name" size="large"></pds-icon>     <!-- 24px -->

<!-- Using custom sizes -->
<pds-icon name="icon-name" size="24px"></pds-icon>

Change the color:

<pds-icon name="icon-name" color="#663399"></pds-icon>

Available Options

Option What it Does Default Examples
name Picks which icon to show Required "menu", "close"
size Sets icon size "regular" (16px) "small", "medium", "24px"
color Changes icon color Matches text color "#663399", "blue"

Need Help?

Common Problems

  1. Icons not showing up?

    • Check that you added the script correctly
    • Make sure you're using the right icon name
    • Check your browser's console for errors

  2. Build issues?

    • Make sure you have Node.js version 22.7.0 or newer
    • Try running npm install to reinstall everything

Get Support

Found a bug or need a new feature? Open an issue

Want to Contribute?

We welcome help! Here's how to get started:

  1. Fork the project
  2. Clone your fork:
    git clone https://github.com/YOUR_USERNAME/pine-icons.git
cd pine-icons
  3. Install what you need:
    npm install

  4. Start the development server:

    npm start

    This runs on port 7200 and shows your changes live.

  5. Make your changes and test them:

    npm test

  6. Create a pull request with your changes

Development Requirements

  • Node.js v22.7.0 or newer
  • npm (comes with Node.js)
  • Git