SVG Icon field

SVG icon field

This module provides a new "SVG icon" field. By default it provides about 1000 categorized SVG icons. Icons used for project are released on CC0 licence, that means it can be used for personal and commercial purposes without attribution. Read more here.

Installation and usage

Install module as usual, go to node/entity field list and add new field. From the select list pick "SVG Icon" field (it's in "Reference" section) and click "Save and continue". On the widget settings page you can select default icon category and icon.

API

Version 8.x-1.0 allows to alter SVG images with hook_svg_icon_field_categories_alter() function so you can add your custom icons sets or remove defaults.

Implementation example:

/**
 * Implements hook_svg_icon_field_categories_alter().
 */
function your_module_svg_icon_field_categories_alter(&$categories) {
  // $categories variable contains all default icon sets. At this point
  // you can define your own sets or remove any default one.

  // Defining new set of icons.
  // 'your_module_colored_icons' is an id and needs to be unique. 
  // The best way to get it unique is to provide your module name 
  // as prefix like so: 'your_module_colored_icons'.
  $categories['categories']['your_module_colored_icons'] = [

    // Label that appears in 'Select icon category'. You don't have to
    // use t() function, as this label is going to be processed later 
    // with t().
    'label' => 'Colored icons',

    // 'attribution' allows to provide an information about the crediting 
    // an author. It's going to be displayed up above icons when your 
    //set is selected in 'Select icon category'.
    'attribution' => '',

    // 'group' allows to define a custom group where your set is going 
    // to be placed or you can use existing one: 'Branding and social', 
    // 'Business', 'Commerce', 'Design', 'Ecology', 'Festivities', 
    // 'Food and kitchen', 'Health', 'Home', 'Internet', 'Sport', 
    // 'Travel and transport', 'Various', 'Weather'
    'group' => 'Internet',

    // Last three elements defines the location of directory with icons.
    // Based on these values a full path to your svg icons dir is going to 
    //be generated eg. /modules/your_module/icons/colored_icons_set.

    // 'element_type' might be a one of 'module', 'theme', 'profile' 
    //or 'theme_engine'.
    'element_type' => 'module',

    // 'element_name' is a name of your 'module' or 'theme' or 
    // 'profile' or 'theme_engine'.
    'element_name' => 'your_module',

    // 'icons_path' is the path to your icons within your element
    // ('module', 'theme', 'profile' or 'theme_engine').
    'icons_path' => 'icons/colored_icons_set',
  ];
}

Future plans

Adding source of icons. Currently only icons defined with hook api or default one can be used. Next versions should support an alternative sources of icons which would be:

• an external source of icons and categories (API)
• user uploaded svg images by custom entity or taxonomy
• defining colors of icons