janklan

1. Look for GIST NOTE comment in the files I posted
2. Install FontAwesome SVG packages via npm/yarn
3. Copy files in this gist into your project & modify to your needs
4. Run bin/console app:icons any time you change the set of icons you need. It will update the Twig extension and the sprite file. Assuming your icon set is fairly stable, this manual step might not bother you.

If the steps above worked, you should be now able to refer to your icons in Twig, for example {{ regularIcon('xmark') }}.

I found it super useful to use those enums as it enables static code analysis, discovery of dangling icons and so on. If you want to render the backed enum in twig directly, use {{ enumIcon(iconVariable) }}.

The enumIcon, regularIcon etc functions have a couple of arguments, check out the Twig extension what are they all about.

janklan

<?php

namespace App\Command\Security;

use Symfony\Component\Console\Attribute\AsCommand;
use Symfony\Component\Console\Command\Command;
use Symfony\Component\Console\Input\InputInterface;
use Symfony\Component\Console\Output\OutputInterface;
use Symfony\Component\Console\Style\SymfonyStyle;
use Symfony\Component\Routing\RouterInterface;

janklan

<?php

namespace App\Command\Maintenance;

use Symfony\Component\Console\Attribute\AsCommand;
use Symfony\Component\Console\Command\Command;
use Symfony\Component\Console\Input\InputInterface;
use Symfony\Component\Console\Output\OutputInterface;
use Symfony\Component\Console\Style\SymfonyStyle;
use Symfony\Component\Routing\RouterInterface;

janklan

<?php

namespace App\Message;

final class RateUpdate
{
    public readonly string $start;

    public readonly string $end;

janklan

import Alpine from "alpinejs";

/*
 * Slideover component
 *
 * How to use:
 *
 * 1. Use any valid Slideover component
 * 2. Add `x-cloak x-data="slideover" x-bind="container"` outside element (containing the overlay, and the slideover)
 * 3. Add `x-bind="overlay"` to the overlay that makes the background go darker

janklan

import Alpine from "alpinejs";

/**
 * Dropdown component
 *
 * How to use:
 *
 * 1. Use any valid Dropdown component
 * 2. Add `x-data="dropdown" x-bind="container"` to the container of both trigger buttons, and the dropdown menu
 * 3. Add `x-bind="trigger"` to the element that should open the dropdown