/ionicons-bundle

Easy integration of Ionicons into Symfony2 projects.

Primary LanguagePHP

NeoNexusIoniconsBundle

Dependency Status SensioLabsInsight Latest Stable Version Latest Unstable Version Total Downloads License

About

This Bundle makes it easy to integrate Ionicons into your Symfony2 projects.

Prerequisites

  • Ionicons repo installed somewhere in your project. It is not contained in this bundle. You can use Composer, Bower or any other way to install it.

Installation

  1. Add neonexus/ionicons-bundle to your composer.json:

     {
     ...
     "require": {
         ...
         "neonexus/ionicons-bundle": "0.4.*",
         "driftyco/ionicons": "1.5.*"
     }
     ...
 }

  2. Add IoniconsBundle to your AppKernel.php:

     ...
 public function registerBundles()
 {
     $bundles = array(
         ...
         new NeoNexus\Ionicons\IoniconsBundle()
     );
     ...
 }
 ...

  3. Update your dependencies: composer update.

NOTICE Installing Ionicons via composer is optional but makes this bundle work out of the box. So I recommend this way.

Configuration

If you did not install Ionicons via composer you have to configure the path to your installation:

ionicons:
    assets_dir: %kernel.root_dir%/../vendor/driftyco/ionicons

Customization

If you want to customize Ionicons you have to put a customized variables file somewhere in your project and configure the path. You also have to set the output path.

ionicons:
    filter: less
    customize:
        variables_file:         %kernel.root_dir%/Resources/ionicons/variables.less
        ionicons_output:    %kernel.root_dir%/Resources/less/ionicons.less

If you want to use the lessphp or sass Assetic filter you have to set the filter variable accordingly.

There is a command to generate a customized output file to incorporate your customized variables file:

app/console neonexus:ionicons:generate

Usage

Installation of font files

The bundle provides a command to install the font files to the web/fonts directory:

app/console neonexus:ionicons:install

There is also a ScriptHandler for conveniently doing this automatically on each composer install or composer update:

...
"scripts": {
    "post-install-cmd": [
        ...
        "NeoNexus\\Ionicons\\Composer\\ScriptHandler::install"
    ],
    "post-update-cmd": [
        ...
        "NeoNexus\\Ionicons\\Composer\\ScriptHandler::install"
    ]
},
...

To include the Ionicons css just include @ionicons_css in your base template.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            {% stylesheets
                '@ionicons_css'
            %}
                <link rel="stylesheet" href="{{ asset_url }}" media="screen"/>
            {% endstylesheets %}
        {% endblock %}

Simple icons (currently broken)

To insert a simple icon add {{ fa_icon( icon name|options ) }} into your template.

The parameter can be a string containing only the icon name without fa- prefix or JSON for more customization. The complete set of options is as follows:

{
    icon:           name of the icon without 'fa-' prefix
    scale:          [lg|2x|3x|4x|5x|stack-1x|stack-2x],
    fixed-width:    [true|false],
    list-icon:      [true|false],
    border:         [true|false],
    pull:           [left|right],
    spin:           [true|false],
    rotate:         [90|180|270],
    flip:           [horizontal|vertical],
    inverse:        [true|false]
}

TODO

  • Fix the Twig Extension
  • Fix the tests

License

Acknowledgment