homelab-svg-assets

Over 500 full-color SVG icons of homelab-related software, products, and brands in a normalized size.

Table of Contents

• Table of Contents
• Usage
  • General usage
  • Diagrams.net usage
  • CDN usage
  • PHP usage
  • NPM usage
  • Hugo usage
• Legal
• Other icon sets
• TODO

Usage

⚠️ All users should read the disclaimer before using this project. ⚠️

General usage

Icons as SVGs are available in the assets directory. See ICONS.md for a preview of all icons.

Diagrams.net usage

In a Diagrams.net project, go to File-->Open Library from-->URL and paste in the URL below (it will take a second to load)

https://raw.githubusercontent.com/loganmarchione/homelab-svg-assets/main/homelab-svg-assets.xml

You can also start brand new project with the library built-in to the URL by using this link (also below)

https://app.diagrams.net/?clibs=Uhttps%3A%2F%2Fraw.githubusercontent.com%2Floganmarchione%2Fhomelab-svg-assets%2Fmain%2Fhomelab-svg-assets.xml

If you self-host Diagrams.net (it is available as a Docker container), you can replace the domain with your custom domain

https://drawio.yourdomain.com/?clibs=Uhttps%3A%2F%2Fraw.githubusercontent.com%2Floganmarchione%2Fhomelab-svg-assets%2Fmain%2Fhomelab-svg-assets.xml

CDN usage

Icons are available via jsDelivr.

Replace the icon name as needed. You can also replace latest with a specific version.

<img height="48" width="48" src="https://cdn.jsdelivr.net/npm/@loganmarchione/homelab-svg-assets@latest/assets/linux.svg"/>

PHP usage

Icons are available in PHP as a package on Packagist.

Run composer require loganmarchione/homelab-svg-assets, or add the package to your composer.json file (below)

{
    "require": {
        "loganmarchione/homelab-svg-assets"
    }
}

Icons will be available at ./vendor/loganmarchione/homelab-svg-assets/assets/linux.svg

NPM usage

Icons are available as a package on NPM.

Run npm install @loganmarchione/homelab-svg-assets, or add the package to your package.json file (below)

{
  "dependencies": {
    "@loganmarchione/homelab-svg-assets": "*"
  }
}

Icons will be available at ./node_modules/@loganmarchione/homelab-svg-assets/assets/linux.svg

Hugo usage

There is a go.mod file, so this icon pack can be used as a Hugo module. You need to be using at least Hugo 0.56.0.

In your Hugo site directory, initialize your site as a module:

hugo mod init foo

In your config.yaml (adjust for .json or .toml configuration files), add the section below:

module:
  imports:
    - path: github.com/loganmarchione/homelab-svg-assets
      mounts:
        - source: assets
          target: assets/svg/homelab-svg-assets

Download the module:

hugo mod get -u

Create a shortcode in the location below:

layouts/shortcodes/homelab.html

Copy/paste the following code into the shortcode (you can apply custom CSS using the class blah in the example):

{{/*Get the parameters */}}
{{ $path := (.Get "src") }}

{{/* Concat to create the correct path */}}
{{- $icon := resources.Get (print "svg/homelab-svg-assets/" $path ".svg" ) -}}

<span class="blah">{{- $icon.Content | safeHTML -}}</span>

Finally, in your markdown files, you can reference the icon:

{{< homelab src="linux" >}}

Legal

See DISCLAIMER.md

Other icon sets

It would be remiss of me if I did not mention other great icons sets

• Simple Icons - Monochromatic SVG icons for popular brands
• Bootstrap Icons - Mostly generic icons, but some brand icons
• Font Awesome - Mix of generic and brand icons
• Devicon - Icons representing programming languages, designing & development tools
• Dashboard Icons - Mix of SVG and PNG dashboard icons

TODO

See TODO.md