Contrib.social

Add a field icon for the ISBN field type

Open on Drupal.org →
Created on 7 September 2024, 2 months ago
Updated 12 September 2024, 2 months ago

Problem/Motivation

In Drupal 10.3 we have a new UI for adding a field:

It would be cool if we add a logo for the ISBN field type here.

Proposed resolution

It looks like there are two ways to provide a logo for a field type:

  • By providing a mymodule.field_type_categories.yml file. This method should be used if the field falls under a specific category. This is not the case for the ISBN field type. Commerce Core does this for example.
  • By implementing hook_field_type_category_info_alter(). The Link module does this for example.

Despite the above, the following is also needed:

  • A SVG file, can be provided separately or using inline SVG in CSS. Commerce Core provides it separately, all field types from Drupal Core that I checked do it via inline SVG in CSS.
  • A CSS file that could look something like this:
    .field-icon-myfieldtype {
  background-image: url("../icons/myfieldtype.svg");
}

    Or like this (example from the Link module):

    .field-icon-link {
  background-image: url("data:image/svg+xml,%3csvg height='38' viewBox='0 0 38 38' width='38' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m25.84 2.37c-1.972.311-3.605 1.099-5.162 2.493-1.157 1.035-3.04 2.995-3.221 3.353a1.34 1.34 0 0 0 -.018 1.252c.193.415.819.997 1.219 1.133.798.272 1.01.143 2.997-1.818.891-.88 1.734-1.688 1.873-1.796.678-.523 1.686-.971 2.555-1.135.663-.125 2.055-.089 2.622.068 1.75.484 3.119 1.611 3.911 3.219.493.999.595 1.459.593 2.673-.002 1.102-.093 1.593-.444 2.395-.437.998-.716 1.326-3.528 4.137-1.468 1.467-2.844 2.795-3.058 2.951-1.167.846-2.819 1.293-4.162 1.126a6.606 6.606 0 0 1 -2.194-.674c-.836-.445-1.081-.654-2.231-1.909-.385-.42-.706-.585-1.139-.584-.431.001-.898.215-1.313.604-.579.541-.721 1.135-.423 1.773.157.339.916 1.282 1.378 1.712a9.753 9.753 0 0 0 3.617 2.108c.98.314 1.471.395 2.613.432.91.03 1.195.015 1.842-.096a9.098 9.098 0 0 0 2.767-.918c1.263-.639 1.688-1.007 4.862-4.201 2.382-2.397 2.954-3.006 3.28-3.496 1.732-2.599 2.122-5.727 1.075-8.622-1.126-3.113-3.765-5.388-7.049-6.079-.818-.172-2.484-.224-3.262-.101m-10.64 10.783c-1.249.2-2.102.463-3.071.946-1.308.651-1.648.941-4.727 4.012-1.669 1.666-2.97 3.018-3.178 3.302-.899 1.23-1.444 2.426-1.758 3.857-.168.763-.233 2.364-.128 3.113.583 4.136 3.564 7.335 7.605 8.161 2.581.528 5.344-.096 7.537-1.7.261-.191 1.234-1.1 2.162-2.02 1.865-1.851 2.043-2.083 2.047-2.677.003-.427-.133-.719-.538-1.163-.35-.383-.785-.62-1.212-.661-.581-.056-.836.131-2.744 2.013-1.74 1.715-2.089 2.001-2.908 2.379-.895.414-1.338.502-2.507.499-.947-.002-1.096-.018-1.592-.171-.737-.227-1.185-.431-1.713-.783-1.1-.731-1.953-1.812-2.37-3.006-.489-1.401-.452-3.071.097-4.364.449-1.056.614-1.252 3.451-4.107 1.466-1.475 2.829-2.809 3.03-2.964 1.652-1.284 3.976-1.616 5.891-.842 1.036.419 1.703.931 2.81 2.16.537.595 1.024.749 1.675.527.388-.132.966-.601 1.17-.951.338-.576.258-1.146-.258-1.835-1.526-2.036-3.759-3.341-6.333-3.703-.425-.06-2.108-.075-2.438-.022' fill='%2355565b'/%3e%3c/svg%3e");
}
  • An entry in mymodule.libraries.yml, pointing to the CSS file.

I've already made a logo:

Code will follow.

✨ Feature request
Status

Fixed

Version

1.0

Component

User interface

Created by

🇳🇱Netherlands megachriz

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024