How do I include an SVG icon in my in-line text on my knowledge base article?

image avatar

Michael Howell

Posted Jul 03, 2024

I want to include a basic SVG icon in one of my articles, but everytime I add it to my article the code is immediately cleared after I click apply. Just wondering what I need to do to include it?

 

Apologies if this is the wrong place to ask.

 

The code is a basic icon from the Heroicons pack (https://heroicons.com/)

 

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
 <path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
</svg>
 

0

1

1 comment

Date
    Newest
      image avatar

      Nolwenn Marjou

      Hi Michael, 

      I've been faced with the same issue when trying to add SVGs directly into the article code. The svg tag and all that was in it was immediately wiped from the code as soon as I saved.
       

      The workaround I have found so far is the following:

      1. Download or create a .svg file with the code of your icon and all the size / color information required in the svg code.
      2. In your theme, add the .svg file as a new asset.

      3. In the css file for your theme, create a style to display the icon and insert the svg file as a background image, using the following syntax:

        background-image: url($assets-imagename-svg);

      4. Style using the normal background css styles.
      5. Insert the style in the article code. In my case, I did it like this:
        <div class="myicon"></div>
      6. Publish your theme.  You should see the icon in the article.

      I hope that helps.
       

      Cheers,

      Nolwenn

      0

      Sign in to leave a comment.

      Didn't find what you're looking for?

      New post