Inline svg with html outer adding custom class

support
1

I need my SVG class to be part of the HTML so that it works with PurgeCSS.

Originally I was using the example from here:

{{ $svg := . }}
{{ $class := print $svg "-icon" }}
{{ $match := "<svg (.*)?>(.*)</svg>" }}

{{ $replaceWith := printf `<svg class="%s" ${1}>${2}</svg>` $class }}
{{ return (replaceRE $match $replaceWith (printf "/assets/images/%s.svg" $svg | readFile) | safeHTML) }}

So I’ve tried to update this to use findRE instead but I keep getting zgotmplz.

{{ $svg := ("/static/img/logo.svg" | readFile) }}
{{ $svgParts := (findRE "<svg(.*)?>(.*)</svg>" $svg 2) }}
<svg id="logo" class="h-20 max-h-[30vh] mx-auto md:h-auto py-1 mb-1 lg:mb-2 md:w-10/12" {{ index $svgParts 1 | safeHTML }}>
  {{ index $svgParts 2 | safeHTML }}
</svg>
2

You need to use safeHTMLAttr in the attribute field.

Also searching for “zgotmplz” in the Hugo docs will lead you there :slight_smile:

1 Like
3

Cheers I’d missed that but still not parsing the svg correctly.

I’ve tried adjusting the regex too.
{{ $svgParts := (findRE "<svg(.*)?>((?:.*\r?\n?)*)</svg>" $svg 2) }}

Which works here but not in the findRE: regex101: build, test, and debug regex

Do I have the regex correct?

4

Are to trying to inject that class attribute in the SVG tag?

If so, I created a test page here: Modify attrs in SVG | Hugo MWE

Templating code

Given that the SVG file path is provided using an svg front-matter in the content file, below does the job on inserting that class attr in the SVG tag:

{{ with .Param "svg" }}
    {{ $svg := . | readFile }}
    {{ $class_attr := `class="h-20 max-h-[30vh] mx-auto md:h-auto py-1 mb-1 lg:mb-2 md:w-10/12"` }}
    {{ $svg = replaceRE `(<svg)\s+([^>]+?>)` (printf `${1} %s ${2}` $class_attr) $svg }}
    {{ $svg | safeHTML }}
{{ end }}
5

The problem with that was that PurgeCSS wasn’t recognising the classes inside the string. It reads the html files and removes any unused classes from the css.

6

It should work. If you use kaushalmodi’s suggestion, that thing injects the SVG, with classes, into the
final HTML. As PurgeCSS is a post build task, it should be able to detect the classes.

7

Maybe I’m doing things wrong followed this example? GitHub - ttntm/hugo-landing-page: A simple landing page built with Hugo and Tailwind CSS

The css processing is ran before hugo.

"scripts": {
    "start": "gulp css && hugo server",
    "deploy": "gulp css && hugo --minify"
},

tailwind.config.js

module.exports = {
  purge: {
    enabled: true,
    content: [
      './content/**/*.md',
      './layouts/**/*.html',
      // wherever else you use tailwind classes
    ],
  },
8

You can completely avoid using gulp. Refer to this section in the documentation:

The problem with your approach is that you’re only looking for the classes in the layouts/ and content/. The proper way is to look at the files generated by Hugo, and then do the purging. That is what the above link covers.

9

Cheers yeah I see how doing it that would solve my issue and more flexible.

Is there a GitHub project showing some of the best practices with Hugo?

10

I don’t know much on that end. I usually frequent this forum, and check whatever new features come with each Hugo release.

Maybe checking the source of open-source themes will be what you want.

11

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.