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.
Comments
Comment #2
ayalon CreditAttribution: ayalon commentedComment #3
PA robot CreditAttribution: PA robot commentedThere 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.
Comment #4
deepanker_bhalla CreditAttribution: deepanker_bhalla as a volunteer and at Srijan | A Material+ Company commentedHi ayalon,
Kindly see the automated review of your project as its showing some errors.
Link: https://pareview.sh/node/1897
Comment #5
ayalon CreditAttribution: ayalon at Liip commentedThx for the link to the tool. I finally fixed all remaining code style issues.
The tool above does not find any issues now.
Comment #6
ayalon CreditAttribution: ayalon at Liip commentedComment #7
eliechoufani CreditAttribution: eliechoufani commentedHello,
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
Comment #8
moinak_dutta CreditAttribution: moinak_dutta as a volunteer commentedHi 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.
Comment #9
ayalon CreditAttribution: ayalon at Liip commentedThx 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?
Comment #10
ayalon CreditAttribution: ayalon at Liip commentedAll issues have been addressed. There are no issues in the issue queue.
Comment #11
ayalon CreditAttribution: ayalon at Liip commentedI 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.
Comment #12
ayalon CreditAttribution: ayalon at Liip commentedComment #13
apadernoThank 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.
Comment #14
apadernoThat 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.
Comment #15
apadernoI 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.)
Comment #16
ayalon CreditAttribution: ayalon at Liip commentedThx @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.
Comment #17
ayalon CreditAttribution: ayalon at Liip commentedComment #18
apadernoSince the only issues I found have been fixed, this application is RTBC, for me.
Comment #19
apaderno