Module Description
Provides functionality for adding https://icomoon.io icon packages to Drupal and exposing them for use via CSS, HTML classes, and programmatically.
The module provides several submodules for integration into:
* Micon Link: Provides an alternate widget & formatter for the link field that allows setting icons.
* Micon Menu: Provides the ability to set icons for menu link content.
* Micon Paragraphs: Provides the ability to set icons for paragraph bundles.
* Micon Vocabulary: Provides the ability to set icons for taxonomy vocabularies.
* Micon Content Type: Provides the ability to set icons for content types.
* Micon Local Task: Provides automatic icon placement within the local task tab items.
Adding IcoMoon packages Visit https://icomoon.io/app/#/select and create an icon package, by adding the desired icons to your Selection. Once finished, either click on Generate Font or Generate SVG & more to download the zip file provided by IcoMoon.
Go to `/admin/structure/micon` and follow these steps:
* Click the Add Micon Package button.
* Give your package a Name. Note: A class prefix is added automatically, but it is recommended to keep the class prefix as short as reasonably possible, as it is used in both CSS files and within the icon markup. The shorter it is, the smaller your rendered code and dependencies will be.
* Place the IcoMoon zip file you previously downloaded into the file upload field
* Click Save and you are done.
Published packages are immediately available for use site-wide.
Usage Via CSS and HTML
The Micon admin interface provides an overview of all icons along with information on how to use them via CSS and raw HTML.
Use with twig syntax
{{ micon('fa-user') }} Use within render array
// Icon only. $output['icon'] = [ '#theme' => 'micon_icon', '#icon' => 'fa-user', ]; // Icon with text. $output['icon_with_text'] = [ '#theme' => 'micon', '#title' => t('Hello World'), '#icon' => 'fa-user', '#position' => 'after', '#icon_only' => FALSE, ]; Use to attach icon to translatable text
// Typical translatable text t('Hello World'); // Translatable text with icon micon('Hello World')->setIcon('fa-user'); Use translatable icon trait
use Drupal\micon\MiconIconizeTrait; class myClass { use MiconIconizeTrait; protected $title = 'Hello World'; public function getTitleWithIcon() { return $this->micon($this->title)->setIcon('fa-user'); } } Automatic icon replacement
Modules and themes can add a `NAME.micon.icons.yml` that can define text that will be matched to icons.
Exact match
user: text: hello world icon: fa-user Regular expression match
user_loose: regex: ^hello icon: fa-user When icon definitions are defined this way, modules and themes can utilize any of the above methods of icon placement without having to specify an icon in code.
Versions / Series 2.1.x Under active development, Drupal ^9 || ^10 compatibility
2.0.x Drupal 8 compatible, legacy. No more development. Will be unsupported sooner or later. Upgrade path to 2.1.x (without fear).
8.x-1.x No more development.
The module provides several submodules for integration into:
* Micon Link: Provides an alternate widget & formatter for the link field that allows setting icons.
* Micon Menu: Provides the ability to set icons for menu link content.
* Micon Paragraphs: Provides the ability to set icons for paragraph bundles.
* Micon Vocabulary: Provides the ability to set icons for taxonomy vocabularies.
* Micon Content Type: Provides the ability to set icons for content types.
* Micon Local Task: Provides automatic icon placement within the local task tab items.
Adding IcoMoon packages Visit https://icomoon.io/app/#/select and create an icon package, by adding the desired icons to your Selection. Once finished, either click on Generate Font or Generate SVG & more to download the zip file provided by IcoMoon.
Go to `/admin/structure/micon` and follow these steps:
* Click the Add Micon Package button.
* Give your package a Name. Note: A class prefix is added automatically, but it is recommended to keep the class prefix as short as reasonably possible, as it is used in both CSS files and within the icon markup. The shorter it is, the smaller your rendered code and dependencies will be.
* Place the IcoMoon zip file you previously downloaded into the file upload field
* Click Save and you are done.
Published packages are immediately available for use site-wide.
Usage Via CSS and HTML
The Micon admin interface provides an overview of all icons along with information on how to use them via CSS and raw HTML.
Use with twig syntax
{{ micon('fa-user') }} Use within render array
// Icon only. $output['icon'] = [ '#theme' => 'micon_icon', '#icon' => 'fa-user', ]; // Icon with text. $output['icon_with_text'] = [ '#theme' => 'micon', '#title' => t('Hello World'), '#icon' => 'fa-user', '#position' => 'after', '#icon_only' => FALSE, ]; Use to attach icon to translatable text
// Typical translatable text t('Hello World'); // Translatable text with icon micon('Hello World')->setIcon('fa-user'); Use translatable icon trait
use Drupal\micon\MiconIconizeTrait; class myClass { use MiconIconizeTrait; protected $title = 'Hello World'; public function getTitleWithIcon() { return $this->micon($this->title)->setIcon('fa-user'); } } Automatic icon replacement
Modules and themes can add a `NAME.micon.icons.yml` that can define text that will be matched to icons.
Exact match
user: text: hello world icon: fa-user Regular expression match
user_loose: regex: ^hello icon: fa-user When icon definitions are defined this way, modules and themes can utilize any of the above methods of icon placement without having to specify an icon in code.
Versions / Series 2.1.x Under active development, Drupal ^9 || ^10 compatibility
2.0.x Drupal 8 compatible, legacy. No more development. Will be unsupported sooner or later. Upgrade path to 2.1.x (without fear).
8.x-1.x No more development.
Module Link
Project Usage
508
Security Covered
Covered By Security Advisory
Version Available
Production
Module Summary
This module aims to solve the functionality of adding IcoMoon icon packages to Drupal and exposing them for use via CSS, HTML classes, and programmatically, with submodules for integration into different aspects of Drupal such as links, menus, paragraphs, taxonomies, content types, and local tasks.
Data Name
micon
OPENAI CHATBOT
OPENAI CHATBOT
