I want to use Bootstrap SVG Icon without bootstrap.
https://icons.getbootstrap.com/icons/arrow-clockwise/
See this code:
<span>
<span style="vertical-align:middle;display:inline-block;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
</svg>
</span>
<span style="vertical-align:middle;display:inline-block;">My Text 1</span>
</span>
<span>
<span style="vertical-align:middle;display:inline-block;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
</svg>
</span>
<span style="vertical-align:middle;display:inline-block;">My Text 2</span>
</span>
My question: how do I vertical align the text to the center of SVG icon next to it?
I'd use flexbox for this. Something like:
<span style="display: inline-flex; gap: 5px; align-items: center;">
<span style="display: flex; align-items: center; justify-content: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
</svg>
</span>
<span>My Text 2</span>
</span>
<span style="display: inline-flex; gap: 5px; align-items: center;">
<span style="display: flex; align-items: center; justify-content: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
</svg>
</span>
<span>My Text 2</span>
</span>
You'll have to match the height of the SVG with the text, and change the layout a bit. Try this:
<div style="display: flex; align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 18 18" style="margin-right: 4px;">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
</svg>
<span>My Text 1</span>
</div>
Just included 1, you can produce the other similarly.
I've assumed you're using Bootstrap too so used some util classes from it & have wrapped the items in a hstack element to spread them out. Seems ok with smaller icons but to me looks slightly off as icons get larger.
<div class="hstack gap-4">
<div>
<span class="d-inline-block align-middle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 18 18">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
</svg>
</span>
<span class="d-inline-block align-middle">My Text 1</span>
</div>
<div>
<span class="d-inline-block align-middle">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 18 18">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
</svg>
</span>
<span class="d-inline-block align-middle">My Text 2</span>
</div>
<div>
<span class="d-inline-block align-middle">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 18 18">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
</svg>
</span>
<span class="d-inline-block align-middle">My Text 3</span>
</div>
</div>
Here's a codepen: https://codepen.io/themelizeme/pen/eYEGBMq
Related
Given I have a svg as follows:
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#a)">
<path d="M0 0h20v20H0V0z" fill="#0D4AF9" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M2 14.666a1.334 1.334 0 1 1 2.669.001A1.334 1.334 0 0 1 2 14.666zm4.667.667a.668.668 0 0 1 0-1.334h10.667a.667.667 0 1 1 0 1.334H6.667zM2 9.998a1.333 1.333 0 1 1 2.666 0 1.333 1.333 0 0 1-2.666 0zm4.667.667a.667.667 0 1 1 0-1.333h10.667a.666.666 0 1 1 0 1.333H6.667zM2 5.333a1.333 1.333 0 1 1 2.666.001A1.333 1.333 0 0 1 2 5.332v.001zm4.667.666a.667.667 0 1 1 0-1.333h10.667a.666.666 0 1 1 0 1.333H6.667z"
fill="#fff"/>
</g>
<defs>
<clipPath id="a">
<rect width="20" height="20" rx="2"/>
</clipPath>
</defs>
</svg>
which renders like:
How can one make those white lines and circles transparent? I tried creating masks but a total noob.
You can join the d attributes of the 2 paths and use fill-rule="evenodd" so that the second part of the path became a hole.
body{background:silver}
<svg width="200" height="200" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#a)">
<path d="M0 0h20v20H0V0z
M2 14.666a1.334 1.334 0 1 1 2.669.001A1.334 1.334 0 0 1 2 14.666zm4.667.667a.668.668 0 0 1 0-1.334h10.667a.667.667 0 1 1 0 1.334H6.667zM2 9.998a1.333 1.333 0 1 1 2.666 0 1.333 1.333 0 0 1-2.666 0zm4.667.667a.667.667 0 1 1 0-1.333h10.667a.666.666 0 1 1 0 1.333H6.667zM2 5.333a1.333 1.333 0 1 1 2.666.001A1.333 1.333 0 0 1 2 5.332v.001zm4.667.666a.667.667 0 1 1 0-1.333h10.667a.666.666 0 1 1 0 1.333H6.667z"
fill="#0D4AF9" fill-rule="evenodd"
/>
</g>
<defs>
<clipPath id="a">
<rect width="20" height="20" rx="2"/>
</clipPath>
</defs>
</svg>
Observation: I've changed the size of the svg element. You can change it back to what you need.
Split out the element you want to another path, and then change the fill.
How to get a circle background color on hover over the three horizontal dots in tailwind css?
Sample Code:
const Header = () => {
return (
<div className="flex px-4 py-4">
<div className="mr-auto font-bold text-md mb-2">The Coldest Sunset</div>
<div className="text-sm align-middle">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 hover:bg-blue-200 hover:rounded-full"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</div>
</div>
);
};
export default Header;
You can change the parent element background, and if you want to change the color, just add fill="currentColor" on the SVG element.
Something like this.
<div class="flex px-4 py-4">
<div class="mr-auto font-bold text-md mb-2">The Coldest Sunset</div>
<div class="text-sm align-middle group hover:bg-blue-200 rounded-full w-8 h-8 flex items-center justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
fill="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</div>
</div>
You can check quickly on the Tailwind playground
https://play.tailwindcss.com/azLEEd0RUu
I have an image that I'm exporting from the app Nucleo as an SVG. If you look at the SVG in the browser, it looks good, but after running it through svgtofont it turns into a black box. The current repo has many SVGs, all of them render fine, just this one is problematic.
Here's the code for the SVG, is there something in there that's incompatible with turning it into a font?
<svg width="16" height="16" viewBox="0 0 16 16" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>asset</title>
<g class="nc-icon-wrapper">
<defs>
<path d="M8 0c.558 0 1.01.452 1.01 1.009v1.069a5.97 5.97 0 0 1 4.909 4.913h1.072a1.009 1.009 0 1 1 0 2.018h-1.078a5.974 5.974 0 0 1-4.903 4.855v1.127a1.01 1.01 0 0 1-2.019 0v-1.132a5.975 5.975 0 0 1-4.853-4.85H1.01a1.009 1.009 0 1 1 0-2.018h1.122a5.974 5.974 0 0 1 4.859-4.909V1.009A1.01 1.01 0 0 1 8 0zm0 3.939a4.061 4.061 0 1 0 0 8.123 4.061 4.061 0 0 0 0-8.123zm0 2.07a1.992 1.992 0 1 1 .001 3.983 1.992 1.992 0 0 1 0-3.984z" id="path-1"/>
</defs>
<g id="Tracking" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="↳-🎨Color">
<mask id="mask-2" fill="#fff">
<use xlink:href="#path-1"/>
</mask>
<use id="Mask" fill="#000" xlink:href="#path-1"/>
<g id="Group" mask="url(#mask-2)" fill="#1B2431">
<g id="↳-🎨Color">
<path id="Base" d="M0 0h16v16H0z"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Try using this:
<svg width="16" height="16" viewBox="0 0 16 16" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>asset</title>
<path d="M8 0c.558 0 1.01.452 1.01 1.009v1.069a5.97 5.97 0 0 1 4.909 4.913h1.072a1.009 1.009 0 1 1 0 2.018h-1.078a5.974 5.974 0 0 1-4.903 4.855v1.127a1.01 1.01 0 0 1-2.019 0v-1.132a5.975 5.975 0 0 1-4.853-4.85H1.01a1.009 1.009 0 1 1 0-2.018h1.122a5.974 5.974 0 0 1 4.859-4.909V1.009A1.01 1.01 0 0 1 8 0zm0 3.939a4.061 4.061 0 1 0 0 8.123 4.061 4.061 0 0 0 0-8.123zm0 2.07a1.992 1.992 0 1 1 .001 3.983 1.992 1.992 0 0 1 0-3.984z" id="path-1"/>
</svg>
The path in your example with an ID of Baseuses this mask to cut itself out in a very contrived way. I just copied the mask path, and kept it as a path, and deleted everything else!
Demo:
https://codepen.io/EightArmsHQ/pen/bcde36ccc9e6b5b8a8e8e22cdaf58a2d
Every now and again I'm pleased I've messed around with SVG code!
I have been trying to change the bootstrap icon from outline to fill using stroke and fill.
For instance:
<svg width="22" height="22" viewBox="0 0 16 16" class="bi bi-house-door" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6zM2.5 7.707V14H6v-4a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4h3.5V7.707L8 2.207l-5.5 5.5z"/>
<path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
</svg>
I have an outlined home icon:
How can I transfer it to this:
Dynamically using fill, stroke, and fill-rule. I have already tried changing the stroke and fill rule but I still cannot transform the first object to the second one. Is there any way I can do this?
The answer is no. There is no way to fill the inside of the house using CSS. At least not in a generic sense that would work with any shape *.
The reason is because the outline is the shape. The SVG contains two <path> elements.
the house outline.
the chimney
The house outline path consists of two subpaths. The first It contains two subpaths, one is the very outside border of the house shape and the second is the transparent hole in the middle.
If we split the first path into those two subpaths and colour them differently, you will see what is happening.
svg {
width: 300px;
height: 300px;
}
path:nth-child(1) {
fill: red;
}
path:nth-child(2) {
fill: yellow;
}
path:nth-child(3) {
fill: blue;
}
<svg width="22" height="22" viewBox="0 0 16 16" class="bi bi-house-door" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<!-- path 1 subpath 1 - the outline (red) -->
<path fill-rule="evenodd" d="M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6z"/>
<!-- path 1 subpath 2 - the house inside (yellow) -->
<path fill-rule="evenodd" d="M2.5 7.707V14H6v-4a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4h3.5V7.707L8 2.207l-5.5 5.5z"/>
<!-- path 2 - the chimney (blue) -->
<path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
</svg>
If you want a filled version of the house, you would need to modify the SVG itself. Just remove the subpath for the "inside" of the house.
svg {
width: 300px;
height: 300px;
}
<svg width="22" height="22" viewBox="0 0 16 16" class="bi bi-house-door" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6z"/>
<path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
</svg>
* Technically, you can achieve this with CSS. But the CSS would be specific to this particular icon, and not be generally applicable to other icons with the same issue.
Also, modifying paths this way is a new feature that is not supported by all browsers yet.
For instance, this example works in Chrome, but not Firefox.
svg {
width: 300px;
height: 300px;
}
path:nth-child(1) {
d: path('M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6z');
}
<svg width="22" height="22" viewBox="0 0 16 16" class="bi bi-house-door" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6zM2.5 7.707V14H6v-4a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4h3.5V7.707L8 2.207l-5.5 5.5z"/>
<path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
</svg>
I'm using bootstrap. Below the navbar I want to have a div like it is in the image, with the current path, and for the icons, I want to use bootstrap svg icons:
My doubt is how to properly use svg icons in the html and also how to style them. For example, the bootstrap svg for house icon is:
<svg class="bi bi-house-door-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M6.5 10.995V14.5a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5V11c0-.25-.25-.5-.5-.5H7c-.25 0-.5.25-.5.495z"/>
<path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
</svg>
And for the right arrow is this:
<svg class="bi bi-chevron-compact-right" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M6.776 1.553a.5.5 0 0 1 .671.223l3 6a.5.5 0 0 1 0 .448l-3 6a.5.5 0 1 1-.894-.448L9.44 8 6.553 2.224a.5.5 0 0 1 .223-.671z"/>
</svg>
It's correct to use svg bootstrap icons like this in the html or there is another approach that is more correct? And also to style the svg is correct like in the example below using the class like ".svg"?
HTML
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="">
Logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
</ul>
</div>
</div>
</nav>
<div class="bg-light" style="">
<div class="container">
<div class="row">
<div class="col-12" style="">
<ol class="breadcrumb mb-0" style="">
<li class="breadcrumb-item">
<a href="index.html">
<svg class="bi bi-house-door-fill svg" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M6.5 10.995V14.5a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5V11c0-.25-.25-.5-.5-.5H7c-.25 0-.5.25-.5.495z"/>
<path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
</svg>
</a>
</li>
<svg class="bi bi-chevron-compact-right svg" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M6.776 1.553a.5.5 0 0 1 .671.223l3 6a.5.5 0 0 1 0 .448l-3 6a.5.5 0 1 1-.894-.448L9.44 8 6.553 2.224a.5.5 0 0 1 .223-.671z"/>
</svg>
<li class="breadcrumb-item"> Pages</li>
<svg class="bi bi-chevron-compact-right svg" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M6.776 1.553a.5.5 0 0 1 .671.223l3 6a.5.5 0 0 1 0 .448l-3 6a.5.5 0 1 1-.894-.448L9.44 8 6.553 2.224a.5.5 0 0 1 .223-.671z"/>
</svg>
<li class="breadcrumb-item active"> <span>Subpage</span></li>
</ol>
</div>
</div>
</div>
</div>
CSS
.breadcrumb{
background: transparent;
}
.svg{
color:gray;
}
.svg:hover{
color:green;
cursor:pointer;
}