I'm using HTMX and I have a button inside a form that says 'Send' and when the form is submitted a loading spinner appears next to it. I want the 'Send' to disappear and only the loading spinner to be shown while the request is in progress. How can I do that?
<form hx-post="/test">
<button type="submit">
<span>Send</span>
<svg class="htmx-indicator ml-2 animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="black" fill="transparent" stroke-width="4"></circle>
<path class="opacity-75" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</button>
</div>
</form>
The .htmx-request class should be added to the button that triggered the request, so you can use that with some CSS to hide the text.
https://htmx.org/docs/#request-operations
We are trying to create an icon font for our custom multi-color icons. Icomoon worked like a charm for our UI icons (mono-color) but with multi-color icons, multiple lines are required to use an icon (look at the example below). Is there any way to achieve a similar behavior as the mono-colors but for multi-color SVG icons?
ex
mono-color icon:
<span class="icon-name">
multi-color icon:
<span class="icon-name">
<span class="path1">
<span class="path2">
<span class="path3">
<span class="path4">
<span class="path5">
<span class="path6">
<span class="path7">
<span class="path8">
</span>
If I understand that correctly, you are struggling with colouring svgs.
The svg code can contain a fill element (https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_circle for reference).
Moreover, you could try to change the color by using CSS (color property).
If you need to use an icon font (instead of inlined svgs) you can't circumvent placing multiple glyphs/elements for each color.
To some extend you might achieve a multicolored text display with Opentype SVG fonts.
Unfortunately browser support is quite limited:
Photoshop, version CC 2017 and above
Illustrator
Firefox, version 32 and above
Microsoft Edge, Windows 10 Anniversary Edition and above
In Windows 10, the DirectWrite and Direct2D platform components allow OpenType-SVG support in any apps that use those APIs
Besides converting svgs to such a font file will require more sophisticated font editors or at least more experience in font file generating/editing.
So using icon svgs directly is certainly more straightforward.
You can achieve a quite font-like behaviour e.g by:
combining multiple icons in a single svg using <defs> or <symbol>
using keyword based fill properties like "currentColor" to color icons via text color
using css-variables to define reusable color themes
Example: inlined svg icons
let iconInserts = document.querySelectorAll(".icon-insert");
let iconDefs = document.querySelector(".iconDefs");
if (iconInserts.length) {
iconInserts.forEach(function (iconSpan) {
let iconName = iconSpan.getAttribute("data-icon");
let symbolHref = "#" + iconName;
let iconDef = iconDefs.querySelector(symbolHref);
let viewBox = iconDef.getAttribute("viewBox");
// insert
let iconSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
iconSVG.classList.add("svg-inline");
iconSVG.setAttribute("viewBox", viewBox);
let iconUse = document.createElementNS("http://www.w3.org/2000/svg", "use");
iconSVG.appendChild(iconUse);
iconSpan.appendChild(iconSVG);
iconUse.setAttribute("href", symbolHref);
iconUse.classList.add(iconName);
});
}
body{
font-size:15vmin;
}
.svg-inline{
display:inline-block;
height:1em;
transform:translateY(20%);
}
.theme1{
--col1:green;
--col2:pink;
--col3:purple;
--col4:orange;
--col5:lime;
--col6:cyan;
--col7:#444;
}
.theme2{
--col1:green;
--col2:green;
--col3:green;
--col4:orange;
--col5:orange;
--col6:orange;
--col7:green;
}
.icon-news{
--col1:green;
--col2:pink;
--col3:purple;
--col4:orange;
--col5:lime;
--col6:cyan;
--col7:#444;
}
<p>
<svg class="svg-inline theme1" viewBox="0 0 1000 1000">
<use href="#icon-news" />
</svg>
Sample icon (colored by css vars)
<svg class="svg-inline theme2" viewBox="0 0 1000 1000">
<use href="#icon-news" />
</svg>
Sample icon 2 (colored by css vars)
<svg class="svg-inline" viewBox="0 0 1000 1000" style="color:orange">
<use href="#icon-news2" />
</svg>
Sample icon 3 (colored by currentColor)
<span class="icon-insert" data-icon="icon-news"></span>
Sample icon 4 (injected by js)
</p>
<!-- icon library in hidden svg file -->
<svg class="iconDefs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" style="display:none">
<symbol id="icon-news" viewBox="0 0 1000 1000">
<path fill="var(--col1)" id="p6" d="M251 658h313v62H251z" />
<path fill="var(--col2)" id="p5" d="M626 658h252v62H626z" />
<path fill="var(--col3)" id="p4" d="M626 531h252v63H626z" />
<path fill="var(--col4)" id="p3" d="M626 406h252v63H626z" />
<path fill="var(--col5)" id="p2" d="M626 282h252v62H626z" />
<path fill="var(--col6)" id="p1" d="M501 344v187H314V344h187zm63-62H251v312h313V282z" />
<path fill="var(--col7)" id="bg" d="M1003 155H125v64H-1v533c0 52 43 94 94 94h817c51 0 93-42 93-94V155zM125 752c0 17-14 31-32 31-17 0-31-14-31-31V282h63v470zm816 0c0 17-14 31-31 31H182c4-10 6-21 6-31V219h753v533z" />
</symbol>
<symbol id="icon-news2" viewBox="0 0 1000 1000">
<path fill="currentColor" id="p1" d="M501 344v187H314V344h187zm63-62H251v312h313V282z" />
<path fill="currentColor" id="bg" d="M1003 155H125v64H-1v533c0 52 43 94 94 94h817c51 0 93-42 93-94V155zM125 752c0 17-14 31-32 31-17 0-31-14-31-31V282h63v470zm816 0c0 17-14 31-31 31H182c4-10 6-21 6-31V219h753v533z" />
</symbol>
</svg>
You might also write a simple icon insertion script injecting placeholder span elements by svg instances (4. example)
<span class="icon-insert" data-icon="icon-news"></span>
could be replaced by something like this:
<span class="icon-insert" data-icon="icon-news">
<svg class="svg-inline" viewBox="0 0 1000 1000">
<use href="#icon-news" class="icon-news" />
</svg>
</span>
Some icon libraries also provide a similar js based injection approach (e.g feather icons)
See also: css-tricks: Inline SVG vs Icon Fonts [CAGEMATCH]
I want it so that when a user clicks on the heart icon, the heart-icon is hidden and the heart-filled-icon is shown. How do I refer to the other icon within my jQuery function to change it's "display" from "none" to "shown"? I know that this example is really wrong this is just an idea of what I want to do and I can't figure it out.
$('.heart-icon').click(function(){
$('.heart-icon').hide();
$('.heart-filled-icon').show();
});
<svg width="1em" height="1em" viewBox="0 0 16 16" class="heart-icon bi bi-heart" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
<svg width="1em" height="1em" style ="display:none;" viewBox="0 0 16 16" class="heart-filled-icon bi bi-heart-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
</svg>
There are many different ways you can do this...
One way is to toggle the Bootstrap display classes. Put either d-none or d-block on the SVG's classes initially.
$('.bi').click(function(){
$('.bi').toggleClass('d-none d-block');
})
https://codeply.com/p/FmVXaxOvoA
I've recently been introduced to svg sprite and I decided to try it out for the first time on my current project but I'm dead sure there's something missing and I just cant figure it out even after reading some documentations and tutorials.
the sprite
<svg xmlns='http://www.w3.org/2000/svg'>
<defs>
<symbol id="icon-github" viewBox='0 0 24 24'>
<title>Github Icon</title>
<path d='M.184 10.462c-.779 4.906 1.401 10.823 8.123 13.006.12.022.231.032.335.032.782 01.32-.582 1.32-1.3-.097-.523.383-2.642-.92-2.357-2.519.536-2.821-.871-3.205-1.607 1.086 1.394 2.718 1.359 3.949.819.683-.3.326-1.064.65-1.343a.75.75 0 00-.407-1.314c-2.314-.255-4.457-1.001-4.457-4.702 0-2.168 1.505-2.362 1.09-3.269-.015-.033-.333-.754-.045-1.849 1.419.262 2.072 1.28 2.753 1.097 1.687-.46 3.544-.46 5.23 0 .704.189 1.207-.801 2.738-1.103.441 1.654-.473 2.058.103 2.677.632.68.953 1.503.953 2.447 0 5.564-4.717 3.957-5.101 5.22a.748.748 0 00.235.792c.61.513.53 1.83.465 2.889-.067 1.098-.125 2.045.482 2.579.214.19.595.393 1.284.253 6.634-2.131 8.83-8.022 8.063-12.917C21.726-2.856 2.296-2.84.184 10.462zm8.27 10.978l.004.505a11.811 11.811 0 01-1.475-.623c.425.109.913.156 1.471.118zm.37-3.7l-.015.08c-.853.252-1.509.001-1.957-.752l-.001-.002c.68.364 1.381.56 1.973.674zM12 2c11.833 0 14.502 16.267 3.469 19.941-.038-.297-.003-.857.021-1.252.058-.951.126-2.059-.213-2.985 5.088-1.059 5.513-6.646 3.554-9.135.243-.952.145-3.189-.729-3.463-.206-.065-1.305-.304-3.437 1.037a11.657 11.657 0 00-5.361 0c-1.064-.667-3.462-1.752-3.922-.6-.534 1.342-.407 2.427-.248 3.03-1.739 2.204-1.218 5.894.534 7.626-.993-.475-2.361-.637-2.656.314-.323 1.037.912.911 1.679 2.804.073.236.208.513.415.788C-1.705 14.54 1.581 2 12 2z'></path>
</symbol>
and the HTML:
<div class="container__footer">
<a class="container__button" href="https://github.com/" target="_blank">
<svg class="container__icon">
<use xlink:href="../_src/sprites/defs.svg#icon-github"></use>
</svg>
</a>
</div>
Any possible mistake I might be making?
I'm including svg:s in my markup using xlink:href:
<svg class="questionTitleIcon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-questionmark"></use>
</svg>
#icon-questionmark is defined
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-questionmark" viewBox="0 0 60 61" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"><!-- Generator: Sketch 3.4.1 (15681) - http://www.bohemiancoding.com/sketch --><title>Slice 1</title><desc>Created with Sketch.</desc><defs></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g id="icon-invoicing-1" sketch:type="MSLayerGroup"><path d="M59.9827338,30.6427143 C59.9827338,14.2078571 46.5638849,0.884857143 30.0107914,0.884857143 C13.4581295,0.884857143 0.0392805755,14.2078571 0.0392805755,30.6427143 C0.0392805755,47.0775714 13.4581295,60.4005714 30.0107914,60.4005714 C46.5638849,60.4005714 59.9827338,47.0775714 59.9827338,30.6427143" id="Fill-1" fill="#FFBB2F" sketch:type="MSShapeGroup"></path><path d="M32.7333898,38.383 C33.4633898,39.1 33.8283898,40.003 33.8283898,41.091 C33.8283898,42.18 33.4633898,43.082 32.7333898,43.799 C32.0023898,44.516 31.0933898,44.874 30.0053898,44.874 C28.9163898,44.874 28.0203898,44.516 27.3173898,43.799 C26.6143898,43.082 26.2623898,42.18 26.2623898,41.091 C26.2623898,40.003 26.6143898,39.1 27.3173898,38.383 C28.0203898,37.667 28.9163898,37.308 30.0053898,37.308 C31.0933898,37.308 32.0023898,37.667 32.7333898,38.383 Z" id="Path" stroke="#6C4B00" stroke-width="2" sketch:type="MSShapeGroup"></path><path d="M22.0223898,23.022 C22.0223898,23.022 22.4993898,19.883 24.0523898,18.329 C25.6053898,16.777 27.7353898,16 30.4433898,16 C31.7433898,16 32.9053898,16.193 33.9273898,16.577 C34.9493898,16.963 35.8193898,17.507 36.5353898,18.21 C37.2523898,18.914 37.7963898,19.743 38.1683898,20.699 C38.5393898,21.654 38.7253898,22.69 38.7253898,23.805 C38.7253898,24.601 38.6393898,25.298 38.4663898,25.895 C38.2943898,26.492 38.0623898,27.037 37.7703898,27.528 C37.4773898,28.019 37.1463898,28.464 36.7743898,28.862 L36.4023898,29.26 C35.9503898,29.676 35.2333898,30.297 34.8093898,30.641 C34.8093898,30.641 34.8093898,30.641 34.4653898,30.932 C34.1193898,31.225 33.8083898,31.53 33.5293898,31.848 C33.2503898,32.167 33.1113901,32.3135647 32.8723898,32.884 C32.6333895,33.4544353 32.6333898,34.305 32.6333898,34.437 C32.6333898,34.568 31.7333898,34.675 30.6333898,34.675 L29.0583898,34.675 C27.9583898,34.675 27.0583898,34.326 27.0583898,33.899 C27.0583898,33.472 27.1773898,31.749 27.4173898,31.151 C27.6563898,30.554 27.9603898,30.017 28.3323898,29.539 C28.7043898,29.061 29.1153898,28.623 29.5673898,28.225 L30.0183898,27.826 C30.5143898,27.432 31.4163898,26.701 32.0223898,26.201 C32.0223898,26.201 32.0223898,26.201 32.4743898,25.736 C32.9253898,25.272 33.1513898,24.734 33.1513898,24.123 C33.1513898,23.433 32.9323898,22.836 32.4943898,22.331 C32.0553898,21.827 31.3323898,21.575 30.3233898,21.575 C29.3143898,21.575 28.5323898,21.867 27.9743898,22.451 C27.7887231,22.6456667 27.9743896,22.4510002 27.4173899,23.2842646 C26.8603902,24.1175289 26.2383898,24.999 25.1383898,24.999 L23.7223898,24.999 C22.6223898,24.999 21.8573898,24.109 22.0223898,23.022 Z" id="Path" stroke="#6C4B00" stroke-width="2" sketch:type="MSShapeGroup"></path></g></g></symbol>
</svg>
This works fine in Chrome.
In firefox, on any other url than "/", if I have a base-tag in my header, the items are not found, here is an example of the base-tag
Why is this and what can be done about it?
As Kaiido said, if you have to use a <base> element, then you will need to change all your xlink:href and url(#foo) references to absolute URLs. For example:
xlink:href="/path/to/my.svg#icon-questionmark"