Merge pull request #339 from PanderMusubi/icon_improvement

reduced whitespace and support for extra classes for icons

Author: PanderMusubi

CHANGES.rst

@@ -1,6 +1,7 @@
 Changelog
 =========
 
+- Reduced icon whitespace and support for classes.
 - Upgrade to Bootstrap Icons 1.11.3.
 
 2.4.1

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 <https://icons.getbootstrap.com/>`_.
     :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'``).

examples/bootstrap4/templates/icon.html

@@ -18,6 +18,10 @@ <h2>Icon with custom size and custom color</h2>
 <pre>{% raw %}{{ render_icon('heart', '2em', 'red') }}{% endraw %}</pre>
 Output: {{ render_icon('heart', '2em', 'red') }}
 
+<h2>Icon with additional classes for styling</h2>
+<pre>{% raw %}{{ render_icon('heart', '2em', classes='text-success bg-light p-2 rounded-lg') }}{% endraw %}</pre>
+Output: {{ render_icon('heart', '4em', classes='text-success bg-light p-2 rounded-lg') }}
+
 <h2>Icon with title and descr</h2>
 <pre>{% raw %}{{ render_icon('heart', title='Heart', desc='A heart.') }}{% endraw %}</pre>
 Output: {{ render_icon('heart', title='Heart', desc='A heart.') }}

examples/bootstrap5/templates/icon.html

@@ -18,6 +18,10 @@ <h2>Icon with custom size and custom color</h2>
 <pre>{% raw %}{{ render_icon('heart', '2em', 'red') }}{% endraw %}</pre>
 Output: {{ render_icon('heart', '2em', 'red') }}
 
+<h2>Icon with additional classes for styling</h2>
+<pre>{% raw %}{{ render_icon('heart', '2em', classes='text-success bg-body-secondary p-2 rounded-3') }}{% endraw %}</pre>
+Output: {{ render_icon('heart', '4em', classes='text-success bg-body-secondary p-2 rounded-3') }}
+
 <h2>Icon with title and descr</h2>
 <pre>{% raw %}{{ render_icon('heart', title='Heart', desc='A heart.') }}{% endraw %}</pre>
 Output: {{ render_icon('heart', title='Heart', desc='A heart.') }}

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'] %}
-<svg class="bi{% if not color %}"{% elif color in bootstrap_colors %} text-{{ color }}"{% else %}" style="color: {{ color }}"{% endif %}
- width="{{ size }}" height="{{ size }}" fill="currentColor">
-    {% if title is not none %}<title>{{ title }}</title>{% endif %}
-    {% if desc is not none %}<desc>{{ desc }}</desc>{% endif %}
-    <use xlink:href="{{ url_for('bootstrap.static', filename='icons/bootstrap-icons.svg') }}#{{ name }}"/>
-</svg>
-{% 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'] -%}
+<svg class="bi{% if not color %}{% if classes %} {{ classes }}{% endif %}"
+{%- elif color in bootstrap_colors %} text-{{ color }}"{% else %}" style="color: {{ color }}"{% endif -%}
+{%- if size %} width="{{ size }}"{% endif %}{% if size %} height="{{ size }}"{% endif %} fill="currentColor">
+    {%- if title %}<title>{{ title }}</title>{% endif -%}
+    {%- if desc %}<desc>{{ desc }}</desc>{% endif -%}
+    <use xlink:href="{{ url_for('bootstrap.static', filename='icons/bootstrap-icons.svg') }}#{{ name }}"/></svg>
+{%- endmacro %}
 
 
 {% macro arg_url_for(endpoint, base) %}

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 '<title>Heart</title>' 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 '<desc>A heart.</desc>' in data
+    assert 'class="bi text-success bg-light"' in data
 
 
 def test_render_icon_config(app, client):