Description

This module allows you to upload and display SVG icons in the drupal backend. You can display these icons in your frontend theme using twig or render them as a fields.

Usage

  • Install the module. It will create a new vocabulary called "icons".
  • On the vocabulary, you can configure the path of the svg map in the public files folder.
  • Add some icons by using the "Add term" functionality. Please use SVGs that contain strokes and not just paths.
  • Create an entity reference field to a taxonomy term using the "icons" vocabulary
  • Change the Field Widget from "Autocomplete" to "Icon Select" and you will get a nice icon picker on the target entity
  • Change the Field Formatter to "SVG Icon"

Using icons in Twig templates

For all the frontend developers, I added a Twig Extension to easily add an svg icon somewhere in a theme or a module

The second parameter is optional.
{{ svg_icon('symbol-id', 'class1, class2') }}

Example

{{ svg_icon('ui-check', 'icon--large') }}

Generate css sprites using drush command

drush generate-sprites

This will generates a sprite css from the icons/svgs folder
and place it in icons/css.

Project link

https://www.drupal.org/project/icon_select

Git instructions

git clone --branch 8.x-1.x https://git.drupal.org/project/icon_select.git

Installation and configuration

Icon Select Plugin can be installed like any other Drupal module.

Manual Reviews

Comments

ayalon created an issue. See original summary.

ayalon’s picture

Issue summary: View changes
PA robot’s picture

Status: Needs review » Needs work

There are some errors reported by automated review tools, did you already check them? See http://pareview.sh/pareview/httpsgitdrupalorgprojecticon_selectgit

We are currently quite busy with all the project applications and we prefer projects with a review bonus. Please help reviewing and put yourself on the high priority list, then we will take a look at your project right away :-)

Also, you should get your friends, colleagues or other community members involved to review this application. Let them go through the review checklist and post a comment that sets this issue to "needs work" (they found some problems with the project) or "reviewed & tested by the community" (they found no major flaws).

I'm a robot and this is an automated message from Project Applications Scraper.

deepanker_bhalla’s picture

Hi ayalon,

Kindly see the automated review of your project as its showing some errors.

Link: https://pareview.sh/node/1897

ayalon’s picture

Thx for the link to the tool. I finally fixed all remaining code style issues.
The tool above does not find any issues now.

ayalon’s picture

Status: Needs work » Needs review
eliechoufani’s picture

Hello,

there's one more little thing to do:

FILE: ...w_temp/src/Plugin/Field/FieldWidget/IconSelectFieldWidgetDefault.php
--------------------------------------------------------------------------
FOUND 1 ERROR AFFECTING 1 LINE
--------------------------------------------------------------------------
12 | ERROR | [x] There must be one blank line after the last USE
| | statement; 2 found;
--------------------------------------------------------------------------
PHPCBF CAN FIX THE 1 MARKED SNIFF VIOLATIONS AUTOMATICALLY

This was checked by Coder Sniffer.

Thank you

moinak_dutta’s picture

Hi ayalon,

Automated Review

[Best practice issues identified by pareview.sh]

Manual Review

Individual user account
[Yes: Follows] the guidelines for individual user accounts.

No duplication
[Yes: Does not cause] module duplication and/or fragmentation.

Master Branch
[Yes: Follows] the guidelines for master branch.

Licensing
[Yes: Follows] the licensing requirements.

3rd party assets/code
[Yes: Follows] the guidelines for 3rd party assets/code.

README.txt/README.md
[Yes: Follows] the guidelines for in-project documentation and/or the README Template.

Code long/complex enough for review
[Yes: Follows] the guidelines for project length and complexity.

Secure code
[No: List of security issues identified.]

If added, please don't remove the security tag, we keep that for statistics and to show examples of security problems.

ayalon’s picture

Thx for taking time on testing my module @moinak_dutta. We are using it quite some time in production and beside a minor fix its stable.
I fixed the mentioned code style issue @eliechoufani.

What are the next steps?

ayalon’s picture

Status: Needs review » Reviewed & tested by the community

All issues have been addressed. There are no issues in the issue queue.

ayalon’s picture

I released a new version of the module with several improvements:
8.x-1.0-beta4

We have the module now in use on a large drupal website for several months.

ayalon’s picture

Issue summary: View changes
Issue tags: +PAreview: review bonus
apaderno’s picture

Status: Reviewed & tested by the community » Needs review

Thank you for your contribution!

Please don't set the status to Reviewed & tested by the community. That is the task of the reviewers, not the users who do the application.

apaderno’s picture

Status: Needs review » Needs work
namespace Drupal\icon_select\Helper;

/**
 * Plugin implementation of the icon_select_widget default input widget.
 *
 * @FieldWidget(
 *   id = "icon_select_widget_default",
 *   module = "icon_select",
 *   label = @Translation("Icon Select"),
 *   field_types = {
 *     "entity_reference"
 *   }
 * )
 */
class SvgSpriteGenerator {
}

That is not a field widget implementation. The annotation is correct, but the class implementation is wrong. Field Widget API describes exactly how a field widget is implemented.

apaderno’s picture

Issue summary: View changes

I take the document comment before the SvgSpriteGenerator class was copy-pasted from another class, so that is just a copy-paste error which should still be fixed. Annotating the wrong class is probably confusing Drupal.

I don't see any code that sanitizes the SVG file before outputting it. See the code used from the \enshrined\svgSanitize\Sanitizer class, for example. The module should use that class or a similar one.

(There have been already a similar issue with another module outputting a SVG file, where not sanitizing the SVG file before outputting was considered a security issue.)

ayalon’s picture

Thx @kiamlaluno for the constructive feedback.
I fixed the file comment / copy paste error.

Additionally I added a SVG sanitizer, which is cleaning the SVG sprite using the library you proposed. This should fulfill the security concerns.

ayalon’s picture

Status: Needs work » Needs review
apaderno’s picture

Status: Needs review » Reviewed & tested by the community

Since the only issues I found have been fixed, this application is RTBC, for me.

apaderno’s picture

Assigned: Unassigned » apaderno
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.