Usually to make use of this icon set in Hugo, you would have to download each icon you need. Luckily, there’s an easier way to make use of the set with Hugo modules. In the future, Hugo will have an easier way to integrate with JavaScript modules." /><metaname="twitter:card"content="summary"/>
<metaname="twitter:title"content="Simple Icons integration with Hugo modules"/>
Usually to make use of this icon set in Hugo, you would have to download each icon you need. Luckily, there’s an easier way to make use of the set with Hugo modules. In the future, Hugo will have an easier way to integrate with JavaScript modules."/>
<metaproperty="og:title"content="Simple Icons integration with Hugo modules"/>
Usually to make use of this icon set in Hugo, you would have to download each icon you need. Luckily, there’s an easier way to make use of the set with Hugo modules. In the future, Hugo will have an easier way to integrate with JavaScript modules." />
Usually to make use of this icon set in Hugo, you would have to download each icon you need. Luckily, there’s an easier way to make use of the set with Hugo modules. In the future, Hugo will have an easier way to integrate with JavaScript modules."><metaitemprop="datePublished"content="2020-10-20T21:36:34+08:00"/>
<p><ahref="https://github.com/simple-icons/simple-icons">Simple Icons</a> is a free and open source icon set for popular brands including social media sites such as Twitter, YouTube, Twitch, GitHub, and so on.
This is a perfect component for getting social media icons.</p>
</div>
<divclass="paragraph">
<p>Usually to make use of this icon set in Hugo, you would have to download each icon you need.
Luckily, there’s an easier way to make use of the set with <ahref="https://gohugo.io/hugo-modules/">Hugo modules</a>.
In the future, Hugo will have an easier way to <ahref="https://discourse.gohugo.io/t/esbuild-looks-like-we-can-finally-get-solid-hugo-modules-support/28757">integrate</a><ahref="https://gohugo.io/commands/hugo_mod_npm/#readout">with JavaScript modules</a>.
<p>To get started, simply initialize your Hugo site as a Hugo module with <code>hugo mod init $HUGO_MOD_NAME</code> where <code>$HUGO_MOD_NAME</code> is simply the name of the Hugo module which could be anything.
For example, if you host your Hugo site on GitHub pages, you might want to name your module like <code>github.com/$USER/$HUGO_SITE_REPO</code>.</p>
</div>
<divclass="paragraph">
<p>Then, add the Simple Icons repo as a dependency module in your site configuration.
The following configuration gets the icon set and the metadata and places them at <code>assets/icons</code> and <code>data/simple-icons.json</code> respectively.</p>
<p>And the SVG source will be applied inline to the resulting page.
This opens up a lot of uses with the icon set.</p>
</div>
<divclass="paragraph">
<p>Let’s reimplement the <ahref="../configurable-list-of-contacts.html">configurable list of contacts</a> with added feature of adding an icon from the set with each key serves as the icon to be displayed.</p>
<ahref="#_footnoteref_1">1</a>. Or integrating with NPM which <ahref="https://gohugo.io/news/0.75.0-relnotes/">Hugo</a> certain has more support in the upcoming version.
</div>
</div>
</main>
</article>
<hr>
<footer>
<p><ahref="https://foo-dogsquared.github.io/hugo-theme-contentful/">Back to home</a></p>
