Use svg files using class names-CodePudding

I have downloaded some .svg files from ionicon but i am not able to use them using class name.

<my-icon>heart</my-icon>

<my-icon class="heart"></my-icon>

CodePudding user response：

There are two ways to implement icons.

Import the css first & use correct class names for the icons, you can set colors later as you wish.
Import the css and write custom css for your custom class name

.heart::before {
  content: "\f388";
  display: inline-block;
    font-family: "Ionicons";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
  color: green;
}

.heart-icon {
  color: red;
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

<span class="heart-icon ion-android-favorite"></span>
<br><br>
<span class="heart"></span>

PS. Stack overflow snippet won't work, click on codepen link below to see changes

Codepen here

Ionicons reference for class names: https://ionic.io/ionicons/v2

Or if you still want to use custom downloaded icons you can try setting it in a psuedo element and can change its color using filter property.

.custom_icon::before {
  content: url('https://svgsilh.com/svg/614515.svg');
  max-height: 17px;
  max-width: 13px;
  transform: scale(0.009);
  filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
  position: absolute;
  transform-origin: left top;
}

<span class="custom_icon"></span>

CodePudding user response：

First, you want to put not regular tags in html, like: < my-tag > This can be runned, but in some computers will not work. I'll show:

my-icon::before {
  content: "\f004";
}
my-icon {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.css" rel="stylesheet"/>
<my-icon></my-icon>

But because of that, you can use classes to detect the icons.

Then you can use some options, like:

background-image: url("your-url-icon.svg");
the svg tag: Your icon code
and you can use frameworks, like font-awesome!

.framework-icon {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}
.framework-icon::before {
  content: "\f004";
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.css" rel="stylesheet"/>
<div>
svg tag: <br><svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="black" />
</svg>
</div>
<div>
frameworks like font-awesome: <div class="framework-icon"></div>
</div>

CodePudding user response：

so what you can do is you can use src if you want an image use image src.

CodePudding user response：

1.you may need to convert the .svg to .ttf or .woff format to use like a class name. I found this website can accept svg files and gives .ttf or .woff files as output.

note: You can adjust styles of svg by this way easly.

https://glyphter.com/

    Example: ```<div class='fa fa-icon'></div>```

2.you can create a class which will have that svg as a background to html <tag>

    <style>
     .svg{
       background:url("image/path" )         
       }
     </style>

     <body>
        <div class="svg"></div>
     </body>

You can write your own properties for background class