I have some .svg images and I want to use then as icon in my webpage. Is there any way to do this with the <i> tag?
I've solved my problem adding the svg code of the image directly on my html.
Something like this:
<svg class="bi bi-x-circle" fill="#ec5e45" height="16"
viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg>
Related
Im trying to convert an image to whatever is this "M2 0a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2V2a2 2 0 0 0 -2 -2H2zm7.5 11h-4a0.5 0.5 0 0 1 -0.5 -0.5v-4a0.5 0.5 0 0 1 1 0v2.793l4.146 -4.147a0.5 0.5 0 0 1 0.708 0.708L6.707 10H9.5a0.5 0.5 0 0 1 0 1z"
I dont know the name sorry but if you can help me i would be veary pleased
It is an sag path attribute. You can view the corresponding svg path below.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
<path d="M2 0a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2V2a2 2 0 0 0 -2 -2H2zm7.5 11h-4a0.5 0.5 0 0 1 -0.5 -0.5v-4a0.5 0.5 0 0 1 1 0v2.793l4.146 -4.147a0.5 0.5 0 0 1 0.708 0.708L6.707 10H9.5a0.5 0.5 0 0 1 0 1z"/>
</svg>
I'm wondering how to display the filled version of a bootstrap icon when I hover over it.
I have this code:
<svg
width="80px"
height="80px"
viewBox="0 0 16 16"
class="bi bi-cloud-plus"
fill="#5cb85c"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"
/>
<path
fill-rule="evenodd"
d="M8 5.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V10a.5.5 0 0 1-1 0V8.5H6a.5.5 0 0 1 0-1h1.5V6a.5.5 0 0 1 .5-.5z"
/>
</svg>
(cloud plus icon)
and I'm wondering how to merge it to it's filled partner (cloud plus fill icon). How?
Generally the way this is accomplished is to:
Include both elements in your markup (in this case, both the filled and non-filled version), with a common parent.
Hide the fill version with CSS
On :hover of the parent, swap the CSS to hide the non-filled version and show the filled version.
See below:
.icon-wrapper .bi-cloud-plus-fill {
display: none;
}
.icon-wrapper:hover .bi-cloud-plus-fill {
display: inline;
}
.icon-wrapper:hover .bi-cloud-plus {
display: none;
}
<div class="icon-wrapper">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-cloud-plus" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/>
<path fill-rule="evenodd" d="M8 5.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V10a.5.5 0 0 1-1 0V8.5H6a.5.5 0 0 1 0-1h1.5V6a.5.5 0 0 1 .5-.5z"/>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-cloud-plus-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm.5 4a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V10a.5.5 0 0 0 1 0V8.5H10a.5.5 0 0 0 0-1H8.5V6z"/>
</svg>
</div>
To do a transition between them is possible but a bit more difficult, in that it requires some positioning tricks. We have to make the parent position: relative; so that the children can be position: absolute to sit on top of each other. Then, instead of leveraging display we leverage opacity for showing/hiding, and put a transition for the opacity property:
.icon-wrapper {
position: relative
display: inline-block;
height: 1em;
width: 1em;
font-size: 36px;
}
.icon-wrapper .bi {
position: absolute;
top: 0;
left: 0;
transition: opacity 1s;
}
.icon-wrapper .bi-cloud-plus-fill {
opacity: 0;
}
.icon-wrapper .bi-cloud-plus {
opacity: 1;
}
.icon-wrapper:hover .bi-cloud-plus-fill {
opacity: 1
}
.icon-wrapper:hover .bi-cloud-plus {
opacity: 0;
}
<div class="icon-wrapper">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-cloud-plus" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/>
<path fill-rule="evenodd" d="M8 5.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V10a.5.5 0 0 1-1 0V8.5H6a.5.5 0 0 1 0-1h1.5V6a.5.5 0 0 1 .5-.5z"/>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-cloud-plus-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm.5 4a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V10a.5.5 0 0 0 1 0V8.5H10a.5.5 0 0 0 0-1H8.5V6z"/>
</svg>
</div>
One last thing-- these SVG are not particularly accessible by themselves. Consider leveraging Bootstrap screen reader utilities to add some accessible text for users who may not be looking at your site to navigate it.
You can use the mouseenter and mouseleave events, and change the innerHTML of the icon based on if it's being hovered over or not.
document.getElementById('cloud-plus').addEventListener('mouseenter', function() {
this.innerHTML = `<path fill-rule="evenodd" d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm.5 4a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V10a.5.5 0 0 0 1 0V8.5H10a.5.5 0 0 0 0-1H8.5V6z"/>`
})
document.getElementById('cloud-plus').addEventListener('mouseleave', function() {
this.innerHTML = `<path fill-rule="evenodd" d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z" />
<path fill-rule="evenodd" d="M8 5.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V10a.5.5 0 0 1-1 0V8.5H6a.5.5 0 0 1 0-1h1.5V6a.5.5 0 0 1 .5-.5z" />`
})
<svg id="cloud-plus" width="80px" height="80px" viewBox="0 0 16 16" class="bi bi-cloud-plus" fill="#5cb85c" xmlns="http://www.w3.org/2000/svg"> // I added id of "cloud-plus" to element
<path fill-rule="evenodd" d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z" />
<path fill-rule="evenodd" d="M8 5.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V10a.5.5 0 0 1-1 0V8.5H6a.5.5 0 0 1 0-1h1.5V6a.5.5 0 0 1 .5-.5z" />
</svg>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am currently working on an emoji component based off of https://ngx-emoji-mart.netlify.app/.
I would like the component to take take up 100% of the parent div capacity and have a maximum of 4 items per row. What would be the best way of doing this? I have tried using flex-box but the issue is that I can't figure out how to limit the number of items per row.
My CSS code is as follows:
.emoji-anchor {
position: relative;
display: inline-block;
flex: 1 1 auto;
color: #858585;
text-align: center;
padding: 12px 4px;
overflow: hidden;
transition: color 0.1s ease-out;
margin: 0;
box-shadow: none;
background: none;
border: none;
flex-wrap: wrap;
}
.emoji-anchors {
flex-direction: row;
justify-content: space-between;
padding: 0 20px 0 25px;
line-height: 0;
}
The full code is quite lengthy to paste, so I have included it here: https://jsfiddle.net/2nxwpL8h/.
Bear in mind that the component is being created dynamically in Angular as follows:
<div class="emoji-anchors">
<ng-template ngFor let-category [ngForOf]="categories" let-idx="index" [ngForTrackBy]="trackByFn">
<span
*ngIf="category.anchor !== false"
class="emoji-anchor"
(click)="this.handleClick($event, idx)"
[class.emoji-anchor-selected]="category.name === selected"
[style.color]="category.name === selected ? color : null"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path [attr.d]="icons[category.id]" />
</svg>
<span class="emoji-anchor-bar" [style.background-color]="color"></span>
</span>
</ng-template>
</div>
Use CSS grid with 4 equal columns
.emoji-anchor {
color: #858585;
text-align: center;
padding: 12px 4px;
}
.emoji-anchors {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
<div _ngcontent-urg-c146="" class="emoji-anchors">
<span _ngcontent-urg-c146="" class="emoji-anchor ng-star-inserted"><svg _ngcontent-urg-c146="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path _ngcontent-urg-c146="" d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24m0 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20M8 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4m8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4m-.8 8c-.7 1.2-1.8 2-3.3 2-1.5 0-2.7-.8-3.4-2H15m3-2H6a6 6 0 1 0 12 0"></path>
</svg><span _ngcontent-urg-c146="" class="emoji-anchor-bar"></span></span>
<span _ngcontent-urg-c146="" class="emoji-anchor ng-star-inserted"><svg _ngcontent-urg-c146="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path _ngcontent-urg-c146="" d="M15.5 8a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m-7 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m10.43-8h-.02c-.97 0-2.14.79-3.02 1.5A13.88 13.88 0 0 0 12 .99c-1.28 0-2.62.13-3.87.51C7.24.8 6.07 0 5.09 0h-.02C3.35 0 .07 2.67 0 7.03c-.04 2.47.28 4.23 1.04 5 .26.27.88.69 1.3.9.19 3.17.92 5.23 2.53 6.37.9.64 2.19.95 3.2 1.1-.03.2-.07.4-.07.6 0 1.77 2.35 3 4 3s4-1.23 4-3c0-.2-.04-.4-.07-.59 2.57-.38 5.43-1.87 5.92-7.58.4-.22.89-.57 1.1-.8.77-.76 1.09-2.52 1.05-5C23.93 2.67 20.65 0 18.93 0M3.23 9.13c-.24.29-.84 1.16-.9 1.24A9.67 9.67 0 0 1 2 7.08c.05-3.28 2.48-4.97 3.1-5.03.25.02.72.27 1.26.65A7.95 7.95 0 0 0 4 7.82c-.14.55-.4.86-.79 1.31M12 22c-.9 0-1.95-.7-2-1 0-.65.47-1.24 1-1.6v.6a1 1 0 1 0 2 0v-.6c.52.36 1 .95 1 1.6-.05.3-1.1 1-2 1m3-3.48v.02a4.75 4.75 0 0 0-1.26-1.02c1.09-.52 2.24-1.33 2.24-2.22 0-1.84-1.78-2.2-3.98-2.2s-3.98.36-3.98 2.2c0 .89 1.15 1.7 2.24 2.22A4.8 4.8 0 0 0 9 18.54v-.03a6.1 6.1 0 0 1-2.97-.84c-1.3-.92-1.84-3.04-1.86-6.48l.03-.04c.5-.82 1.49-1.45 1.8-3.1C6 6 7.36 4.42 8.36 3.53c1.01-.35 2.2-.53 3.59-.53 1.45 0 2.68.2 3.73.57 1 .9 2.32 2.46 2.32 4.48.31 1.65 1.3 2.27 1.8 3.1l.1.18c-.06 5.97-1.95 7.01-4.9 7.19m6.63-8.2l-.11-.2a7.59 7.59 0 0 0-.74-.98 3.02 3.02 0 0 1-.79-1.32 7.93 7.93 0 0 0-2.35-5.12c.53-.38 1-.63 1.26-.65.64.07 3.05 1.77 3.1 5.03.02 1.81-.35 3.22-.37 3.24"></path>
</svg><span _ngcontent-urg-c146="" class="emoji-anchor-bar"></span></span>
<span _ngcontent-urg-c146="" class="emoji-anchor ng-star-inserted"><svg _ngcontent-urg-c146="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path _ngcontent-urg-c146="" d="M17 5c-1.8 0-2.9.4-3.7 1 .5-1.3 1.8-3 4.7-3a1 1 0 0 0 0-2c-3 0-4.6 1.3-5.5 2.5l-.2.2c-.6-1.9-1.5-3.7-3-3.7C8.5 0 7.7.3 7 1c-2 1.5-1.7 2.9-.5 4C3.6 5.2 0 7.4 0 13c0 4.6 5 11 9 11 2 0 2.4-.5 3-1 .6.5 1 1 3 1 4 0 9-6.4 9-11 0-6-4-8-7-8M8.2 2.5c.7-.5 1-.5 1-.5.4.2 1 1.4 1.4 3-1.6-.6-2.8-1.3-3-1.8l.6-.7M15 22c-1 0-1.2-.1-1.6-.4l-.1-.2a2 2 0 0 0-2.6 0l-.1.2c-.4.3-.5.4-1.6.4-2.8 0-7-5.4-7-9 0-6 4.5-6 5-6 2 0 2.5.4 3.4 1.2l.3.3a2 2 0 0 0 2.6 0l.3-.3c1-.8 1.5-1.2 3.4-1.2.5 0 5 .1 5 6 0 3.6-4.2 9-7 9"></path>
</svg><span _ngcontent-urg-c146="" class="emoji-anchor-bar"></span></span>
<span _ngcontent-urg-c146="" class="emoji-anchor ng-star-inserted"><svg _ngcontent-urg-c146="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path _ngcontent-urg-c146="" d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24m10 11h-5c.3-2.5 1.3-4.8 2-6.1a10 10 0 0 1 3 6.1m-9 0V2a10 10 0 0 1 4.4 1.6A18 18 0 0 0 15 11h-2zm-2 0H9a18 18 0 0 0-2.4-7.4A10 10 0 0 1 11 2.1V11zm0 2v9a10 10 0 0 1-4.4-1.6A18 18 0 0 0 9 13h2zm4 0a18 18 0 0 0 2.4 7.4 10 10 0 0 1-4.4 1.5V13h2zM5 4.9c.7 1.3 1.7 3.6 2 6.1H2a10 10 0 0 1 3-6.1M2 13h5c-.3 2.5-1.3 4.8-2 6.1A10 10 0 0 1 2 13m17 6.1c-.7-1.3-1.7-3.6-2-6.1h5a10 10 0 0 1-3 6.1"></path>
</svg><span _ngcontent-urg-c146="" class="emoji-anchor-bar"></span></span>
<span _ngcontent-urg-c146="" class="emoji-anchor ng-star-inserted"><svg _ngcontent-urg-c146="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path _ngcontent-urg-c146="" d="M6.5 12a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5m0 3c-.3 0-.5-.2-.5-.5s.2-.5.5-.5.5.2.5.5-.2.5-.5.5m11-3a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5m0 3c-.3 0-.5-.2-.5-.5s.2-.5.5-.5.5.2.5.5-.2.5-.5.5m5-5.5l-1-.4-.1-.1h.6c.6 0 1-.4 1-1 0-1-.9-2-2-2h-.6l-.8-1.7A3 3 0 0 0 16.8 2H7.2a3 3 0 0 0-2.8 2.3L3.6 6H3a2 2 0 0 0-2 2c0 .6.4 1 1 1h.6v.1l-1 .4a2 2 0 0 0-1.4 2l.7 7.6a1 1 0 0 0 1 .9H3v1c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2v-1h6v1c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2v-1h1.1a1 1 0 0 0 1-.9l.7-7.5a2 2 0 0 0-1.3-2.1M6.3 4.9c.1-.5.5-.9 1-.9h9.5c.4 0 .8.4 1 .9L19.2 9H4.7l1.6-4.1zM7 21H5v-1h2v1zm12 0h-2v-1h2v1zm2.2-3H2.8l-.7-6.6.9-.4h18l.9.4-.7 6.6z"></path>
</svg><span _ngcontent-urg-c146="" class="emoji-anchor-bar"></span></span>
<span _ngcontent-urg-c146="" class="emoji-anchor ng-star-inserted"><svg _ngcontent-urg-c146="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path _ngcontent-urg-c146="" d="M12 0a9 9 0 0 0-5 16.5V21s2 3 5 3 5-3 5-3v-4.5A9 9 0 0 0 12 0zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14zM9 17.5a9 9 0 0 0 6 0v.8a7 7 0 0 1-3 .7 7 7 0 0 1-3-.7v-.8zm.2 3a8.9 8.9 0 0 0 2.8.5c1 0 1.9-.2 2.8-.5-.6.7-1.6 1.5-2.8 1.5-1.1 0-2.1-.8-2.8-1.5zm5.5-8.1c-.8 0-1.1-.8-1.5-1.8-.5-1-.7-1.5-1.2-1.5s-.8.5-1.3 1.5c-.4 1-.8 1.8-1.6 1.8h-.3c-.5-.2-.8-.7-1.3-1.8l-.2-1A3 3 0 0 0 7 9a1 1 0 0 1 0-2c1.7 0 2 1.4 2.2 2.1.5-1 1.3-2 2.8-2 1.5 0 2.3 1.1 2.7 2.1.2-.8.6-2.2 2.3-2.2a1 1 0 1 1 0 2c-.2 0-.3.5-.3.7a6.5 6.5 0 0 1-.3 1c-.5 1-.8 1.7-1.7 1.7"></path>
</svg><span _ngcontent-urg-c146="" class="emoji-anchor-bar"></span></span>
<span _ngcontent-urg-c146="" class="emoji-anchor ng-star-inserted"><svg _ngcontent-urg-c146="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path _ngcontent-urg-c146="" d="M0 0h11v2H0zm4 11h3V6h4V4H0v2h4zm11.5 6a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5m0-2.99a.5.5 0 0 1 0 .99c-.28 0-.5-.22-.5-.5s.22-.49.5-.49m6 5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5m0 2.99a.5.5 0 0 1-.5-.5.5.5 0 0 1 1 .01.5.5 0 0 1-.5.49m.5-9l-9 9 1.51 1.5 9-9zm-5-2c2.2 0 4-1.12 4-2.5V2s.98-.16 1.5.95C23 4.05 23 6 23 6s1-1.12 1-3.13C24-.02 21 0 21 0h-2v6.35A5.85 5.85 0 0 0 17 6c-2.2 0-4 1.12-4 2.5s1.8 2.5 4 2.5m-6.7 9.48L8.82 18.9a47.54 47.54 0 0 1-1.44 1.13c-.3-.3-.99-1.02-2.04-2.19.9-.83 1.47-1.46 1.72-1.89s.38-.87.38-1.33c0-.6-.27-1.18-.82-1.76-.54-.58-1.33-.87-2.35-.87-1 0-1.79.29-2.34.87-.56.6-.83 1.18-.83 1.79 0 .81.42 1.75 1.25 2.8a6.57 6.57 0 0 0-1.8 1.79 3.46 3.46 0 0 0-.51 1.83c0 .86.3 1.56.92 2.1a3.5 3.5 0 0 0 2.42.83c1.17 0 2.44-.38 3.81-1.14L8.23 24h2.82l-2.09-2.38 1.34-1.14zM3.56 14.1a1.02 1.02 0 0 1 .73-.28c.31 0 .56.08.75.25a.85.85 0 0 1 .28.66c0 .52-.42 1.11-1.26 1.78-.53-.65-.8-1.23-.8-1.74a.9.9 0 0 1 .3-.67m.18 7.9c-.43 0-.78-.12-1.06-.35-.28-.23-.41-.49-.41-.76 0-.6.5-1.3 1.52-2.09a31.23 31.23 0 0 0 2.25 2.44c-.92.5-1.69.76-2.3.76"></path>
</svg><span _ngcontent-urg-c146="" class="emoji-anchor-bar"></span></span>
<span _ngcontent-urg-c146="" class="emoji-anchor ng-star-inserted"><svg _ngcontent-urg-c146="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path _ngcontent-urg-c146="" d="M0 0l6 24h2L2 0zm21 5h-4l-1-4H4l3 12h3l1 4h13L21 5zM6.6 3h7.8l2 8H8.6l-2-8zm8.8 10l-2.9 1.9-.4-1.9h3.3zm3.6 0l-1.5-6h2l2 8H16l3-2z"></path>
</svg><span _ngcontent-urg-c146="" class="emoji-anchor-bar"></span></span>
</div>
I want to use this sample svg icon with a circle background. I took some HTML code on how to do it from the DOM from this link
So currently I have this result and as you can see the icon is as big as the background circle.
<link href="https://unpkg.com/tailwindcss#1.1.4/dist/tailwind.min.css" rel="stylesheet" />
<svg class="h-6 w-6 flex-shrink-0" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="12" class="text-green-200 fill-current"></circle>
<path class="text-green-600 fill-current" d="M16.21 16.95a5 5 0 0 1-4.02 4.9l-3.85.77a1 1 0 0 1-.9-.27l-.71-.7a2 2 0 0 1 0-2.83l1.44-1.45a13.17 13.17 0 0 1-1.42-1.41L5.31 17.4a2 2 0 0 1-2.83 0l-.7-.7a1 1 0 0 1-.28-.9l.77-3.86a5 5 0 0 1 4.9-4.02h.86a13.07 13.07 0 0 1 12.82-5.47 1 1 0 0 1 .83.83A12.98 12.98 0 0 1 16.2 16.1v.85zm-4.41 2.94a3 3 0 0 0 2.41-2.94v-1.4a1 1 0 0 1 .47-.84A11.04 11.04 0 0 0 19.8 4.33 10.98 10.98 0 0 0 9.42 9.45a1 1 0 0 1-.85.47h-1.4a3 3 0 0 0-2.94 2.4l-.66 3.34.33.33 2.24-2.24a1 1 0 0 1 1.52.12 11.08 11.08 0 0 0 2.6 2.6 1 1 0 0 1 .12 1.52l-2.24 2.24.33.33 3.33-.67zM15 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</svg>
I would like to have some inner circle margin / spacing. I could either scale down the icon a little bit or scale up the circle. I increased the viewbox size and circle values
<link href="https://unpkg.com/tailwindcss#1.1.4/dist/tailwind.min.css" rel="stylesheet" />
<svg class="h-6 w-6 flex-shrink-0" viewBox="0 0 28 28">
<circle cx="14" cy="14" r="14" class="text-green-200 fill-current"></circle>
<path class="text-green-600 fill-current" d="M16.21 16.95a5 5 0 0 1-4.02 4.9l-3.85.77a1 1 0 0 1-.9-.27l-.71-.7a2 2 0 0 1 0-2.83l1.44-1.45a13.17 13.17 0 0 1-1.42-1.41L5.31 17.4a2 2 0 0 1-2.83 0l-.7-.7a1 1 0 0 1-.28-.9l.77-3.86a5 5 0 0 1 4.9-4.02h.86a13.07 13.07 0 0 1 12.82-5.47 1 1 0 0 1 .83.83A12.98 12.98 0 0 1 16.2 16.1v.85zm-4.41 2.94a3 3 0 0 0 2.41-2.94v-1.4a1 1 0 0 1 .47-.84A11.04 11.04 0 0 0 19.8 4.33 10.98 10.98 0 0 0 9.42 9.45a1 1 0 0 1-.85.47h-1.4a3 3 0 0 0-2.94 2.4l-.66 3.34.33.33 2.24-2.24a1 1 0 0 1 1.52.12 11.08 11.08 0 0 0 2.6 2.6 1 1 0 0 1 .12 1.52l-2.24 2.24.33.33 3.33-.67zM15 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</svg>
But how can I keep the icon centered? Do I have to use a flexbox and center it by myself? The checkmarks on the Tailwind website (link posted above) don't need a flexbox so maybe someone knows how to setup a little margin for the icon and still having it in the center?
A workaround for this would be
<link href="https://unpkg.com/tailwindcss#1.1.4/dist/tailwind.min.css" rel="stylesheet" />
<div class="h-6 w-6 p-1 rounded-full bg-green-200">
<svg class="text-green-600 fill-current" viewBox="0 0 24 24">
<path d="M16.21 16.95a5 5 0 0 1-4.02 4.9l-3.85.77a1 1 0 0 1-.9-.27l-.71-.7a2 2 0 0 1 0-2.83l1.44-1.45a13.17 13.17 0 0 1-1.42-1.41L5.31 17.4a2 2 0 0 1-2.83 0l-.7-.7a1 1 0 0 1-.28-.9l.77-3.86a5 5 0 0 1 4.9-4.02h.86a13.07 13.07 0 0 1 12.82-5.47 1 1 0 0 1 .83.83A12.98 12.98 0 0 1 16.2 16.1v.85zm-4.41 2.94a3 3 0 0 0 2.41-2.94v-1.4a1 1 0 0 1 .47-.84A11.04 11.04 0 0 0 19.8 4.33 10.98 10.98 0 0 0 9.42 9.45a1 1 0 0 1-.85.47h-1.4a3 3 0 0 0-2.94 2.4l-.66 3.34.33.33 2.24-2.24a1 1 0 0 1 1.52.12 11.08 11.08 0 0 0 2.6 2.6 1 1 0 0 1 .12 1.52l-2.24 2.24.33.33 3.33-.67zM15 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</svg>
</div>
but I would really like to keep the circle and don't use a div because I think using the circle is a "cleaner" solution?
Just change the viewBox. Something like this perhaps. If you want a larger border make the viewBox bigger still but don't forget to adjust its origin too.
You can make the circle larger, but if you do leave the cx and cy of the circle alone.
<link href="https://unpkg.com/tailwindcss#1.1.4/dist/tailwind.min.css" rel="stylesheet" />
<svg class="h-6 w-6 flex-shrink-0" viewBox="-2 -2 28 28">
<circle cx="12" cy="12" r="12" class="text-green-200 fill-current"></circle>
<path class="text-green-600 fill-current" d="M16.21 16.95a5 5 0 0 1-4.02 4.9l-3.85.77a1 1 0 0 1-.9-.27l-.71-.7a2 2 0 0 1 0-2.83l1.44-1.45a13.17 13.17 0 0 1-1.42-1.41L5.31 17.4a2 2 0 0 1-2.83 0l-.7-.7a1 1 0 0 1-.28-.9l.77-3.86a5 5 0 0 1 4.9-4.02h.86a13.07 13.07 0 0 1 12.82-5.47 1 1 0 0 1 .83.83A12.98 12.98 0 0 1 16.2 16.1v.85zm-4.41 2.94a3 3 0 0 0 2.41-2.94v-1.4a1 1 0 0 1 .47-.84A11.04 11.04 0 0 0 19.8 4.33 10.98 10.98 0 0 0 9.42 9.45a1 1 0 0 1-.85.47h-1.4a3 3 0 0 0-2.94 2.4l-.66 3.34.33.33 2.24-2.24a1 1 0 0 1 1.52.12 11.08 11.08 0 0 0 2.6 2.6 1 1 0 0 1 .12 1.52l-2.24 2.24.33.33 3.33-.67zM15 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</svg>
So I've been having a gander at some snazzy websites seeing how they do things and how it's laid out for learning purposes and I encountered some code for the pathing that looks like the below example.
<path d="M5.47 7.2l-.55.33a5.14 5.14 0 0 1-3.2-1.28C1.48 6 1.2 5.88.94 5.7A2.39 2.39 0 0 1 0 4.4a7.29 7.29 0 0 1 1.61-1.21c.56-.4 1.13-.78 1.73-1.19l.54.18c.29-.74.29-.75 1-1.1A9.45 9.45 0 0 1 6.23.52 17.77 17.77 0 0 1 8 .14c.09 0 .19.06.29.08s.24.07.28 0A.78.78 0 0 1 9.24 0a5.47 5.47 0 0 1 1.66.09c.38.11.75.26 1.13.37s.35.29.44.56a.7.7 0 0 1 .8 0A8.54 8.54 0 0 1 16 3.54 14.5 14.5 0 0 0 17.11 5a2.55 2.55 0 0 1-1 .92c-.72.39-1.45.77-2.18 1.14s-.65.32-1.09-.24c-.45.09-.41.58-.72.85A13.77 13.77 0 0 1 6.7 8a1.15 1.15 0 0 1-1-.57c-.01-.1-.1-.14-.23-.23zm5.15-3.67c-.16-.35-.26-.62-.41-.87a1.12 1.12 0 0 0-1-.62 4.75 4.75 0 0 0-1.48.26 1.22 1.22 0 0 0-.73.59 9 9 0 0 0-.49 1 .64.64 0 0 0 0 .46c.22.45.47.89.73 1.32a.43.43 0 0 0 .25.19 3.82 3.82 0 0 0 2 0 .76.76 0 0 0 .31-.24 6.42 6.42 0 0 0 .42-.62c.17-.26.33-.54.51-.84l1.27.1c0 .62-.59.85-.7 1.33.18.26.36.43.68.35L15.64 5v-.21a22.24 22.24 0 0 0-3.1-2.73 2.62 2.62 0 0 0-.73-.3 1 1 0 0 0-.75 0c.24.17.46.31.67.48.53.42.57.64.29 1.43zM6.09 6.2c-.3-.4-.53-.68-.74-1a1.1 1.1 0 0 1-.2-.51 3.43 3.43 0 0 1 .36-2.08.9.9 0 0 0 .24-.61 11.53 11.53 0 0 0-1.84 1.2A10.47 10.47 0 0 0 2 4.43l.88.5a5.13 5.13 0 0 1 .76.43 4.57 4.57 0 0 0 2.45.84z"></path>
I was wondering why is it laid out like this? For security reasons? And how does something with such a strange path string actually locate the relevant path.
Any information regarding this would be much appreciated.
Kind regards,
Sam
That's an SVG path element.
It describes the path a line takes (not a file path!) using coordinates, lengths, and so on.
It has nothing to do with security.
<svg>
<path d="M5.47 7.2l-.55.33a5.14 5.14 0 0 1-3.2-1.28C1.48 6 1.2 5.88.94 5.7A2.39 2.39 0 0 1 0 4.4a7.29 7.29 0 0 1 1.61-1.21c.56-.4 1.13-.78 1.73-1.19l.54.18c.29-.74.29-.75 1-1.1A9.45 9.45 0 0 1 6.23.52 17.77 17.77 0 0 1 8 .14c.09 0 .19.06.29.08s.24.07.28 0A.78.78 0 0 1 9.24 0a5.47 5.47 0 0 1 1.66.09c.38.11.75.26 1.13.37s.35.29.44.56a.7.7 0 0 1 .8 0A8.54 8.54 0 0 1 16 3.54 14.5 14.5 0 0 0 17.11 5a2.55 2.55 0 0 1-1 .92c-.72.39-1.45.77-2.18 1.14s-.65.32-1.09-.24c-.45.09-.41.58-.72.85A13.77 13.77 0 0 1 6.7 8a1.15 1.15 0 0 1-1-.57c-.01-.1-.1-.14-.23-.23zm5.15-3.67c-.16-.35-.26-.62-.41-.87a1.12 1.12 0 0 0-1-.62 4.75 4.75 0 0 0-1.48.26 1.22 1.22 0 0 0-.73.59 9 9 0 0 0-.49 1 .64.64 0 0 0 0 .46c.22.45.47.89.73 1.32a.43.43 0 0 0 .25.19 3.82 3.82 0 0 0 2 0 .76.76 0 0 0 .31-.24 6.42 6.42 0 0 0 .42-.62c.17-.26.33-.54.51-.84l1.27.1c0 .62-.59.85-.7 1.33.18.26.36.43.68.35L15.64 5v-.21a22.24 22.24 0 0 0-3.1-2.73 2.62 2.62 0 0 0-.73-.3 1 1 0 0 0-.75 0c.24.17.46.31.67.48.53.42.57.64.29 1.43zM6.09 6.2c-.3-.4-.53-.68-.74-1a1.1 1.1 0 0 1-.2-.51 3.43 3.43 0 0 1 .36-2.08.9.9 0 0 0 .24-.61 11.53 11.53 0 0 0-1.84 1.2A10.47 10.47 0 0 0 2 4.43l.88.5a5.13 5.13 0 0 1 .76.43 4.57 4.57 0 0 0 2.45.84z"></path>
</svg>