render_icon does not show icon

[Wolfgang Fahl]

template="""
{%% from 'bootstrap/utils.html' import render_icon %%}        
{{ render_icon('%s', %d) }}""" % (self.name,self.size)
        html=render_template_string(template)

leads to:

<svg class="bi" width="32" height="32" fill="currentColor">
    <use xlink:href="/bootstrap/static/icons/bootstrap-icons.svg#github"></use>
</svg>

The static part is not displayed. It looks like /bootstrap/static/icons/bootstrap-icons.svg#github is not accessible So i assume some initialization code is missing that will tell flask about he static directory to use. Since i didn't specify static behavior i was wondering why the icon link is not pointing to https://icons.getbootstrap.com/icons/github/

I also wonder whether:

https://css-tricks.com/on-xlinkhref-being-deprecated-in-svg/

needs to be taken into account.

[Grey Li]

The link is pointing to the local SVG file (inside the package). When the render_icon() was added, the Bootstrap Icon has not included a GitHub icon, that's why it didn't display the icon. I will try to update the macro to use the newly added icon font instead of SVG sprite.

[Wolfgang Fahl]

http://fb4demo.bitplan.com/widgets now has a live demo of the issue.

[Wolfgang Fahl]

I wonder why http://fb4demo.bitplan.com/icon works - what's wrong with def widgets and the template widgets.html?

def widgets(self):
        widgetList=[
            Link("https://github.com/WolfgangFahl/pyFlaskBootstrap4","pyFlaskBootstrap4","Extended Flask + Bootstrap4 Library"),
            Image("https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/299px-Tux.svg.png",alt="Tux",width=100),
            Icon("github")
        ]
        return render_template('widgets.html',widgetList=widgetList)
        ```

[Grey Li]

As I said in the last comment, Bootstrap-Flask's render_icon currently uses the local SVG file, and the version of the SVG file doesn't include some newly added icon (e.g. github icon). I will make a new release next week to use the online CSS font for render_icon.

P.S. Your code is fine.

[Grey Li]

You can make a quick fix by replacing the bootstrap-icons.svg inside the flask_bootstrap/static/icons/ directory with the latest one provided by Bootstrap Icons.

[Wolfgang Fahl]

Now i get it - all svgs are in one big file.

So i tried:

wget https://raw.githubusercontent.com/greyli/bootstrap-flask/master/flask_bootstrap/static/icons/bootstrap-icons.svg
xq .svg bootstrap-icons.svg | grep -v http | sed 's/@//' | jq .symbol[].id | cut -d'"' -f2
alarm
alarm-fill
align-bottom
align-center
align-end
align-middle
align-start

...
wifi
wifi-1
wifi-2
wifi-off
window
wrench
x
x-circle
x-circle-fill
x-diamond
x-diamond-fill
x-octagon
x-octagon-fill
x-square
x-square-fill
zoom-in
zoom-out

A count showing that there are currently 1120 icons available.
https://raw.githubusercontent.com/twbs/icons/main/bootstrap-icons.svg
has 1265 icons

Personally i'd find it lovely to use the icons. as the table and pagination example - the example app would have some use this way as a "lookup" tool for icons.

I fixed http://fb4demo.bitplan.com/widgets accordingly to use existing icons.

[Wolfgang Fahl]

http://fb4demo.bitplan.com/pagination now has the icons example