Provides functionality for adding IcoMoon icon packages to Drupal and exposing them for use via CSS, HTML classes, and programmatically.
Visit https://icomoon.io and build an icon package. You can utilize either font packages or image packages. 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.
The Micon admin interface provides an overview of all icons along with information on how to use them via CSS and raw HTML.
{{ micon('fa-user') }}
// Icon only.
$output['icon'] = array(
'#theme' => 'micon_icon',
'#icon' => 'fa-user',
);
// Icon with text.
$output['icon_with_text'] = array(
'#theme' => 'micon',
'#title' => t('Hello World'),
'#icon' => 'fa-user',
'#position' => 'after',
'#icon_only' => FALSE,
);
// Typical translatable text.
t('Hello World');
// Translatable text with icon.
micon('Hello World')->setIcon('fa-user');
use Drupal\micon\MiconIconizeTrait;
class myClass {
use MiconIconizeTrait;
protected $title = 'Hello World';
public function getTitleWithIcon() {
return $this->micon($this->title)->setIcon('fa-user');
}
}
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:
text: ^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.
The Micon module can be installed the same way typical Drupal modules are installed. Below are a couple common examples of how to install with modern conventions (i.e., composer
, drush
). There are no external dependencies outside of Drupal core.
Refer to Drupal's guide on Using composer to manage Drupal site dependencies for more details but generally you can use the following as examples.
It's also important that you tell composer where your contributed modules, themes, and profiles should be installed instead of the composer convention of vendor
.
Define the directories to which Drupal projects should be downloaded
By default, Composer will download all packages to the "vendor" directory. Clearly, this doesn't jive with Drupal modules, themes, profiles, and libraries. To ensure that packages are downloaded to the correct path, Drupal uses the composer/installers package. Just add the following to your composer.json to configure the directories for your Drupal site:
"extra": {
"installer-paths": {
"modules/contrib/{$name}": ["type:drupal-module"],
"modules/custom/{$name}": ["type:drupal-custom-module"],
"profiles/contrib/{$name}": ["type:drupal-profile"],
"themes/contrib/{$name}": ["type:drupal-theme"],
"themes/custom/{$name}": ["type:drupal-custom-theme"]
}
}
# configure composer to look up Drupal modules,
# themes, etc. from Drupal.org
$ composer config repositories.drupal composer https://packages.drupal.org/8
# Require the 'micon' project/package from Drupal.org
$ composer require drupal/micon
#
# OR specify a version of the module:
#
$ composer require drupal/micon:1.x-dev
Add the following to the respective repositories
and require
sections of your composer.json
file:
{
"repositories": [
{
"type": "vcs",
"url": "https://github.com/jacerider/micon.git"
}
],
"require": {
"jacerider/micon": "dev-8.x-1.x-dev"
}
}
Note: Composer is the preferred convention, but if you need to commit the contributed module files to your repository then drush
is a good alternative.
# Download the module
$ drush dl micon
# enable the module
$ drush en micon