Skip to content

[AssetMapper] bootstrap icons works with direct link not with assetmapper require #52620

@tacman

Description

@tacman

Symfony version(s) affected

6.4

Description

<link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.min.css">

works as expected, but

bin/console importmap:require bootstrap-icons/font/bootstrap-icons.min.css

doesn't.

See https://bootstrap-icons-bug.survos.com/ for a working and non-working version.

How to reproduce

symfony new bootstrap-icons-bug --webapp --version=next --php=8.2 && cd bootstrap-icons-bug
composer config minimum-stability beta
composer config extra.symfony.allow-contrib true
composer req symfony/asset-mapper:^6.4 
bin/console importmap:require bootstrap-icons/font/bootstrap-icons.min.css
echo "import 'bootstrap-icons/font/bootstrap-icons.min.css'" >> assets/app.js


bin/console make:controller App -i
sed -i "s|/app|/|" src/Controller/AppController.php 

cat > templates/app.html.twig <<'END'
{% extends 'base.html.twig' %}
{% set useAssetMap = app.request.get('useAssetMap', false) %}
{% block javascripts %}
    {{ useAssetMap ? parent() }}
{% endblock %}

{% block stylesheets %}
    {% if not useAssetMap %} <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.min.css">
    {% endif %}
{% endblock %}

{% block body %}
    {% for useAssetMap in [true, false] %}
    <p>
        <a href="{{ path('app_app', {useAssetMap:useAssetMap}) }}">{{ useAssetMap ? 'with downloaded assetmap file' : 'with link tag to stylesheet on jsdelivr' }} </a>
        </p>
    {% endfor %}
    
    icon: <span class="bi bi-github"></span>
{% endblock %}

END

symfony server:start -d
symfony open:local

Possible Solution

There's something amiss with parsing out the fonts, the javascript console gives some warnings/errors.

Additional Context

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions