@josemi-icons/svg NPM

@josemi-icons/svg

npm version license

Installation

To use our icons in your projects, you can install the package via Yarn or NPM:

# Install using Yarn
$ yarn add @josemi-icons/svg

# OR install using NPM
$ npm install @josemi-icons/svg

Usage

As HTML Images

You can include the icons in your HTML files as standard images using the ` element. To do this, first, copy the desired icon from the package and then reference it in your HTML.

<img src="./path/to/your/icon.svg" alt="Icon Description" width="24" height="24" />

Inline HTML

For more control and customization, you can copy the SVG code of the icon directly into your HTML files. This allows you to easily adjust the icon's size, color, and other properties.

Example:

<style>
    .icon {
        fill: #ff0000; /* Customize the color */
        width: 24px;   /* Customize the size */
        height: 24px;
    }
</style>

<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24">
    <!-- Paste the SVG code of the icon here -->
</svg>

SVG Sprite

We provide a convenient SVG sprite that includes all the icons in a single file. This approach reduces the number of HTTP requests, improves loading times, and simplifies the management of icons in your project. You can easily reference icons anywhere in your HTML by using the <svg> and <use> elements.

<svg class="icon">
    <use xlink:href="./node_modules/@josemi-icons/svg/sprite.svg#rocket"></use>
</svg>

You can apply styles to your icons using CSS, just as you would with any other HTML element.

.icon {
    color: #FF5733; /* Replace with your desired color */
    width: 32px;   /* Set the icon's width */
    height: 32px;  /* Set the icon's height */
}