I have a problem when trying to convert an svg into a font with svgicons2svgfont
I've tried formatting the svg so many times. All the other icons work perfectly. I have no clue what is going on.
Here is the SVG
<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity=".8" clip-path="url(#a)">
<path d="M9.112 6.885a2.084 2.084 0 1 1-4.167-.001 2.084 2.084 0 0 1 4.167.001Z" fill="#0B2343"/>
<path d="M10.998 6.9h2.571M.5 6.9h2.57M7.035 2.936V.366M7.035 13.434v-2.57M9.92 4.01l1.817-1.818M2.332 11.603l1.817-1.817M9.92 9.786l1.817 1.817M2.332 2.192 4.149 4.01" stroke="#0B2343" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="a"><path fill="#fff" d="M0 0h14v14H0z"/></clipPath>
</defs>
</svg>
It will be amazing if you can help me to find what is causing this!
Thanks
Thanks to the suggestion of Robert, I could solve the issue:
Manually remove the clipPath element.
using svgviewer.dev to format the svg
This was the final result and now it renders properly.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" style="enable-background:new 0 0 14 14" xml:space="preserve">
<path class="st0" d="M9.078 6.985a2.084 2.084 0 1 1-4.167-.001 2.084 2.084 0 0 1 4.167.001zM13.534 7.5h-2.57a.5.5 0 1 1 0-1h2.57a.5.5 0 1 1 0 1zM3.036 7.5H.466a.5.5 0 1 1 0-1h2.57a.5.5 0 1 1 0 1zM7 3.536a.5.5 0 0 1-.5-.5V.466a.5.5 0 1 1 1 0v2.57a.5.5 0 0 1-.5.5zM7 14.034a.5.5 0 0 1-.5-.5v-2.57a.5.5 0 1 1 1 0v2.57a.5.5 0 0 1-.5.5zM9.886 4.61a.498.498 0 0 1-.354-.854l1.818-1.817a.5.5 0 1 1 .707.707l-1.818 1.817a.498.498 0 0 1-.353.146zM2.298 12.202a.498.498 0 0 1-.354-.853L3.761 9.53a.5.5 0 1 1 .707.708l-1.817 1.817a.498.498 0 0 1-.353.146zM11.703 12.202a.498.498 0 0 1-.353-.146l-1.818-1.817a.5.5 0 1 1 .707-.708l1.818 1.818a.5.5 0 0 1-.354.853zM4.115 4.61a.498.498 0 0 1-.354-.147L1.944 2.646a.5.5 0 1 1 .707-.707l1.817 1.817a.5.5 0 0 1-.353.853z"/>
</svg>
Thanks!
Related
Can you help me align the icon into the middle of the circle?
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 24 24">
<g>
<circle cx="12" cy="12" r="11" stroke="black" stroke-width="1" fill="#545454"/>
<path fill-rule="evenodd" d="M11.5 4a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zM2 12.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0zm9 2v-7h1v7h-1zm0 3V16h1v1.5h-1z" clip-rule="evenodd" fill="#FFF"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 24 24">
<g>
<circle cx="12" cy="12" r="11" stroke="black" stroke-width="1" fill="#545454"/>
<path fill-rule="evenodd" d="M7.92 2.514A1 1 0 0 1 8.794 2h1.412a1 1 0 0 1 .874.514l7.209 12.977a1 1 0 0 1-.042 1.04l-.683 1.024a1 1 0 0 1-.832.445H2.267a1 1 0 0 1-.832-.445L.753 16.53a1 1 0 0 1-.042-1.04l.437.242-.437-.242L7.92 2.514zM10.206 3H8.794L1.585 15.976 2.267 17h14.465l.683-1.024L10.205 3zM9 12.5V7h1v5.5H9zM9 15v-1.25h1V15H9z" clip-rule="evenodd" fill="#FFF"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 24 24"><g>
<circle cx="12" cy="12" r="11" stroke="black" stroke-width="1" fill="#545454"/>
<path fill-rule="evenodd" d="M9.5 4a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zM2 10.5a7.5 7.5 0 1 1 15 0 7.5 7.5 0 0 1-15 0z" clip-rule="evenodd" fill="#FFF"/><path fill-rule="evenodd" d="M9 14.75V13.5h1v1.25H9zM9.5 7A1.5 1.5 0 0 0 8 8.5H7a2.5 2.5 0 1 1 3.118 2.423.221.221 0 0 0-.104.058.07.07 0 0 0-.014.02v1.249H9V11c0-.574.457-.94.872-1.046A1.5 1.5 0 0 0 9.5 7z" clip-rule="evenodd" fill="#FFF"/>
</g>
</svg>
I'm trying to change the color of this svg img, using TailwindCSS classes:
<svg class="fill-current text-white-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2zm16 3.38V6H4v1.38l8 4 8-4zm0 2.24l-7.55 3.77a1 1 0 0 1-.9 0L4 9.62V18h16V9.62z"/></svg>
and I have the following:
<svg
class="fill-current text-white inline-block h-20 w-20"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2zm16 3.38V6H4v1.38l8 4 8-4zm0 2.24l-7.55 3.77a1 1 0 0 1-.9 0L4 9.62V18h16V9.62z"/>
</svg>
But it doesn't work. What am I doing wrong?
In Tailwind, there is no text-white-500 it's just text-white.
So far you are doing it right by using fill-current. Simply added fill-current text-red-600. This will change the svg color to #E53E3E. Check the color palette
I've tried to fill this SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="23.15" height="20" viewBox="0 0 23.15 20">
<defs>
<style>
.cls-1{fill:#d1d1d1}
</style>
</defs>
<path id="iconfinder_heart_226577" d="M22.777 9.744a5.957 5.957 0 0 0-8.425 0l-1.4 1.4-1.4-1.4a5.958 5.958 0 0 0-8.435 8.426l1.4 1.4 8.43 8.43 8.426-8.426 1.4-1.4a5.958 5.958 0 0 0 .004-8.43zm-4.213 9.83l-5.617 5.617-5.617-5.617-2.808-2.808a3.972 3.972 0 0 1 5.617-5.617l2.808 2.809 2.809-2.809a3.972 3.972 0 0 1 5.617 5.617z" class="cls-1" transform="translate(-1.372 -7.999)"/>
</svg>
With color in the middle, but I was only able to change the color of the stroke.
I've tried a lot of answers here but I didn't understand what I'm doing wrong.
<svg xmlns="http://www.w3.org/2000/svg" width="23.15" height="20" viewBox="0 0 23.15 20">
<defs>
<style>
.cls-1{
fill:#EB6320;
stroke: none;
type: path;
}
</style>
</defs>
<path
id="iconfinder_heart_226577"
d="M22.777 9.744a5.957 5.957 0 0 0-8.425 0l-1.4 1.4-1.4-1.4a5.958 5.958 0 0 0-8.435 8.426l1.4 1.4 8.43 8.43 8.426-8.426 1.4-1.4a5.958 5.958 0 0 0 .004-8.43zm-4.213 9.83l-5.617 5.617-5.617-5.617-2.808-2.808a3.972 3.972 0 0 1 5.617-5.617l2.808 2.809 2.809-2.809a3.972 3.972 0 0 1 5.617 5.617z"
class="cls-1"
transform="translate(-1.372 -7.999)"/>
</svg>
That is because there is another heart drawn on the inside. It is the last half of the path:
-4.213 9.83l-5.617 5.617-5.617-5.617-2.808-2.808a3.972 3.972 0 0 1 5.617-5.617l2.808 2.809 2.809-2.809a3.972 3.972 0 0 1 5.617 5.617z
Replace your path with just the beginning and it should work fine:
M22.777 9.744a5.957 5.957 0 0 0-8.425 0l-1.4 1.4-1.4-1.4a5.958 5.958 0 0 0-8.435 8.426l1.4 1.4 8.43 8.43 8.426-8.426 1.4-1.4a5.958 5.958 0 0 0 .004-8.43zm
I'm currently trying to make a comment icon like below in svg, but with the space around the text as a cut hole in the speech bubble (not like the icon on the bottom).
I want to have a <text> element because I generate the svg dynamically with react.
Does someone know if it is possible ?
Thanks
This filter uses a "green-screen" technique: you color the parts of your content that you want to discriminate among in separate primary colors - then use a color matrix to generate separate nodes containing just the content of each particular color. After you process the contents - at the end you use another color matrix to recolor the content into your final (single) desired color.
<svg width='400px' height='400px' viewBox='0 0 258 229' >
<defs>
<filter id="cut-out">
<feColorMatrix type="matrix" values="0 0 0 0 0
0 0 0 0 0
0 0 1 0 0
-1 0 0 1 0"
result="just-blue"/>
<feColorMatrix type="matrix" values="1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 -1 1 0"
in="SourceGraphic" result="just-red"/>
<feMorphology in="just-blue" operator="dilate" radius="3"/>
<feComposite operator="out" in="just-red"/>
<feComposite operator="over" in2="just-blue"/>
<feColorMatrix type="matrix" values="0 0 0 0 .33
0 0 0 0 .33
0 0 0 0 .33
0 0 0 1 0"/>
</filter>
</defs>
<g filter="url(#cut-out">
<circle r="50" fill="red" cx="100" cy="100"/>
<text x="110" y="140" stroke="none" fill="blue" font-size="70">3</text>
</g>
</svg>
I have this code for inline svg icon:
#Icon = React.createClass
render: ->
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>img</title>
<g stroke-width="2" stroke="#0070D9" fill="none" fill-rule="evenodd">
<path d="M2 1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
<path d="M1.652 14.514l4.956-6.279 5.448 5.579 6.398-5.579M13 3.95a2.05 2.05 0 1 1 0 4.1 2.05 2.05 0 0 1 0-4.1z"/>
</g>
</svg>
But react skip all properties with -, like: stroke-width="2"
Use camelCase. For example: strokeWidth instead of stroke-width. I've made a fiddle with working example.