@conectate/ct-icon v4.4.12

A versatile icon component system for displaying Material Icons and custom SVGs in web applications, with support for various styles and customization options.

IMPORTANT: Check https://fonts.google.com/icons for the list of available icons, fonts and styles.

Table of Contents

• Installation
• Components
• Basic Usage
• Component API
  • ct-icon
  • ct-icon-button
• Icon Styles
• Styling
• Icon List
• TypeScript Support
• Accessibility
• Follow Me
• Contributing
• License

Installation

Install via npm, yarn, or pnpm:

# npm
npm i @conectate/ct-icon

# yarn
yarn add @conectate/ct-icon

# pnpm
pnpm i @conectate/ct-icon

Components

This package includes the following components:

Basic Usage

Material Icons

<!-- Basic icon usage -->
<ct-icon icon="settings"></ct-icon>

<!-- Changing icon style -->
<ct-icon icon="favorite" fontstyle="Fill"></ct-icon>

<!-- Icon with custom size -->
<ct-icon icon="home" style="--ct-icon-size: 36px;"></ct-icon>

Icon Button

<!-- Basic icon button -->
<ct-icon-button icon="search"></ct-icon-button>

<!-- Disabled icon button -->
<ct-icon-button icon="close" disabled></ct-icon-button>

<!-- Icon button with accessibility label -->
<ct-icon-button icon="menu" aria-label="Open menu"></ct-icon-button>

Custom SVG Icons

<!-- Using custom SVG content -->
<ct-icon svg="<svg viewBox='0 0 24 24'><path d='M12 2L2 7l10 5 10-5-10-5z'/></svg>"></ct-icon>

<!-- SVG in icon button -->
<ct-icon-button svg="<svg viewBox='0 0 24 24'><path d='M12 2L2 7l10 5 10-5-10-5z'/></svg>"></ct-icon-button>

Using ES Modules

import { CtIcon } from "@conectate/ct-icon";
import "@conectate/ct-icon";
import "@conectate/ct-icon-button";

// Set global icon font style
CtIcon.FontStyle = "Outlined";
CtIcon.Font = "Symbols";

// Dynamically create an icon
const myIcon = document.createElement("ct-icon");
myIcon.icon = "delete";
document.body.appendChild(myIcon);

Component API

ct-icon

The base icon component that displays Material Icons or custom SVGs.

Properties

Static Properties

Static Methods

ct-icon-button

A button component that displays an icon.

Properties

Icon Styles

The ct-icon component supports different styles from the Material Icons library:

You can set styles globally or per component:

// Global setting
import { CtIcon } from "@conectate/ct-icon";
CtIcon.FontStyle = "Outlined";

// Per component
<ct-icon icon="favorite" fontstyle="Fill"></ct-icon>

Styling

You can customize the components using CSS variables:

ct-icon {
	--ct-icon-size: 24px; /* Icon size (default: 24px) */
}

ct-icon-button {
	/* Inherits --ct-icon-size from ct-icon */
	color: blue; /* Icon color */
}

Icon List

The component provides access to all Material Icons available in the Google Fonts library. You can browse the available icons at:

https://fonts.google.com/icons

When using TypeScript, the package provides type definitions for all available icons, giving you autocomplete support in compatible editors.

TypeScript Support

The package includes full TypeScript definitions and provides autocompletion for icon names:

import { CtIcon } from "@conectate/ct-icon";

// Icon names are typed
const icon = document.createElement("ct-icon");
icon.icon = "settings"; // Autocomplete works here

Accessibility

To ensure your icons are accessible, consider the following best practices:

• Use aria-label for icon buttons to provide a text alternative
• Add title attributes to icons that convey information
• Avoid using icons alone for critical navigation or actions unless properly labeled

<ct-icon-button icon="menu" aria-label="Open navigation menu"></ct-icon-button>

Follow Me

https://x.com/herberthobregon

https://dev.to/herberthobregon

Contributing

1. Fork the repo
2. Create a new branch: git checkout -b feature-branch
3. Commit your changes: git commit -m 'Add new feature'
4. Push to your branch: git push origin feature-branch
5. Open a pull request!

License

See LICENSE