reduced whitespace and support for extra classes for icons

Author: PanderMusubi

CHANGES.rst

@@ -1,6 +1,8 @@
 Changelog
 =========
 
+- Reduced icon whitespace and support for classes.
+
 2.3.3
 -----
 
@@ -334,4 +336,4 @@ Release date: 2018/7/1
 
 Release date: 2018/6/11
 
-Initial release.
+Initial release.

docs/macros.rst

@@ -617,7 +617,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
@@ -627,3 +627,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

@@ -44,6 +44,13 @@ def icon_desc():
             {{ render_icon('heart', desc='A heart.') }}
         ''')
 
+    @app.route('/icon-classes')
+    def icon_classes():
+        return render_template_string('''
+        {% from 'bootstrap4/utils.html' import render_icon %}
+            {{ render_icon('heart', classes='text-success bg-light') }}
+        ''')
+
     response = client.get('/icon')
     data = response.get_data(as_text=True)
     assert 'bootstrap-icons.svg#heart' in data
@@ -76,6 +83,11 @@ def icon_desc():
     assert 'bootstrap-icons.svg#heart' in data
     assert '<desc>A heart.</desc>' in data
 
+    response = client.get('/icon-classes')
+    data = response.get_data(as_text=True)
+    assert 'bootstrap-icons.svg#heart' in data
+    assert 'class="bi text-success bg-light"' in data
+
 
 def test_render_icon_config(app, client):
     app.config['BOOTSTRAP_ICON_SIZE'] = 100