diff --git a/CHANGES.rst b/CHANGES.rst index 9e02600..f1b3e8f 100644 --- a/CHANGES.rst +++ b/CHANGES.rst @@ -1,9 +1,9 @@ Changelog ========= +- Reduced icon whitespace and support for classes. - Upgrade to Bootstrap Icons 1.11.3. - 2.4.1 ----- diff --git a/docs/macros.rst b/docs/macros.rst index 83bee9b..ed78946 100644 --- a/docs/macros.rst +++ b/docs/macros.rst @@ -621,7 +621,7 @@ Example API ~~~~ -.. py:function:: render_icon(name, size=config.BOOTSTRAP_ICON_SIZE, color=config.BOOTSTRAP_ICON_COLOR, title=None, desc=None) +.. py:function:: render_icon(name, size=config.BOOTSTRAP_ICON_SIZE, color=config.BOOTSTRAP_ICON_COLOR, title=None, desc=None, classes=None) :param name: The name of icon, you can find all available names at `Bootstrap Icon `_. :param size: The size of icon, you can pass any vaild size value (e.g. ``32``/``'32px'``, ``1.5em``, etc.), default to @@ -631,3 +631,4 @@ API string (e.g. ``'red'``, ``'#ddd'`` or ``'(250, 250, 250)'``), default to use configuration ``BOOTSTRAP_ICON_COLOR`` (default value is ``None``). :param title: The title of the icon for accessibility support. :param desc: The description of the icon for accessibility support. + :param classes: The classes to use for styling (e.g. ``'text-success bg-body-secondary p-2 rounded-3'``). diff --git a/examples/bootstrap4/templates/icon.html b/examples/bootstrap4/templates/icon.html index 5930ffe..ab4800e 100644 --- a/examples/bootstrap4/templates/icon.html +++ b/examples/bootstrap4/templates/icon.html @@ -18,6 +18,10 @@

Icon with custom size and custom color

{% raw %}{{ render_icon('heart', '2em', 'red') }}{% endraw %}
Output: {{ render_icon('heart', '2em', 'red') }} +

Icon with additional classes for styling

+
{% raw %}{{ render_icon('heart', '2em', classes='text-success bg-light p-2 rounded-lg') }}{% endraw %}
+Output: {{ render_icon('heart', '4em', classes='text-success bg-light p-2 rounded-lg') }} +

Icon with title and descr

{% raw %}{{ render_icon('heart', title='Heart', desc='A heart.') }}{% endraw %}
Output: {{ render_icon('heart', title='Heart', desc='A heart.') }} diff --git a/examples/bootstrap5/templates/icon.html b/examples/bootstrap5/templates/icon.html index 3457a94..caf9137 100644 --- a/examples/bootstrap5/templates/icon.html +++ b/examples/bootstrap5/templates/icon.html @@ -18,6 +18,10 @@

Icon with custom size and custom color

{% raw %}{{ render_icon('heart', '2em', 'red') }}{% endraw %}
Output: {{ render_icon('heart', '2em', 'red') }} +

Icon with additional classes for styling

+
{% raw %}{{ render_icon('heart', '2em', classes='text-success bg-body-secondary p-2 rounded-3') }}{% endraw %}
+Output: {{ render_icon('heart', '4em', classes='text-success bg-body-secondary p-2 rounded-3') }} +

Icon with title and descr

{% raw %}{{ render_icon('heart', title='Heart', desc='A heart.') }}{% endraw %}
Output: {{ render_icon('heart', title='Heart', desc='A heart.') }} diff --git a/flask_bootstrap/templates/base/utils.html b/flask_bootstrap/templates/base/utils.html index 014bc50..f901223 100644 --- a/flask_bootstrap/templates/base/utils.html +++ b/flask_bootstrap/templates/base/utils.html @@ -10,15 +10,15 @@ {% endmacro %} -{% macro render_icon(name, size=config.BOOTSTRAP_ICON_SIZE, color=config.BOOTSTRAP_ICON_COLOR, title=None, desc=None) %} -{% set bootstrap_colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'muted'] %} - - {% if title is not none %}{{ title }}{% endif %} - {% if desc is not none %}{{ desc }}{% endif %} - - -{% endmacro %} +{% macro render_icon(name, size=config.BOOTSTRAP_ICON_SIZE, color=config.BOOTSTRAP_ICON_COLOR, title=None, desc=None, classes=None) %} +{%- set bootstrap_colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'muted'] -%} + + {%- if title %}{{ title }}{% endif -%} + {%- if desc %}{{ desc }}{% endif -%} + +{%- endmacro %} {% macro arg_url_for(endpoint, base) %} diff --git a/tests/test_bootstrap4/test_render_icon.py b/tests/test_bootstrap4/test_render_icon.py index 4f9d11c..afea9bb 100644 --- a/tests/test_bootstrap4/test_render_icon.py +++ b/tests/test_bootstrap4/test_render_icon.py @@ -37,11 +37,11 @@ def icon_title(): {{ render_icon('heart', title='Heart') }} ''') - @app.route('/icon-desc') - def icon_desc(): + @app.route('/icon-desc-classes') + def icon_desc_classes(): return render_template_string(''' {% from 'bootstrap4/utils.html' import render_icon %} - {{ render_icon('heart', desc='A heart.') }} + {{ render_icon('heart', desc='A heart.', classes='text-success bg-light') }} ''') response = client.get('/icon') @@ -71,10 +71,11 @@ def icon_desc(): assert 'bootstrap-icons.svg#heart' in data assert 'Heart' in data - response = client.get('/icon-desc') + response = client.get('/icon-desc-classes') data = response.get_data(as_text=True) assert 'bootstrap-icons.svg#heart' in data assert 'A heart.' in data + assert 'class="bi text-success bg-light"' in data def test_render_icon_config(app, client):