SVG generation #3424744
1 unresolved thread
1 unresolved thread
Closes #3424744
Merge request reports
Activity
7 7 extra_classes, 8 8 ] 9 9 %} 10 <{{html_tag|default('button')}}{{ attributes.addClass(classes) }}> 10 11 {% if text %} 12 {# Trim the text and get the first two characters #} 13 {% 14 set short_text = text|render|trim|slice(0, 2)|join('') 15 %} 16 {% endif %} 17 18 <{{html_tag|default('button')}}{{ attributes.addClass(classes).setAttribute('data-short', short_text) }}> 19 <style> 20 [data-short="{{ short_text }}"] { 21 --default-icon: url("data:image/svg+xml, %3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-size='60' font-weight='700' font-family='arial'%3E ~ {{ short_text }} ~ %3C/text%3E%3C/svg%3E"); -
Thanks for this @finnsky, this is a really clever solution!
In addition to the inline comment, I have two pieces of feedback, one minor and one a larger question.
The larger question is that inline
<style>tags will break CSP. Is that okay in Drupal core @ckrina?The smaller issue is that, according to the mocks, the two letters should be aligned to the baseline, instead of the top.
Mock
MR
this css
<style>can be generated on backend i guess. and never affects anything. it has attribute selectorOnly one problem seems now. that different font.
Edited by Ivan Berdinsky
Please register or sign in to reply