https://github.com/future-wd/hugo-inline-svg
https://github.com/future-wd/hugo-inline-svg
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/future-wd/hugo-inline-svg
- Owner: future-wd
- License: mit
- Created: 2022-10-02T06:18:41.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-06-21T12:38:27.000Z (10 months ago)
- Last Synced: 2024-08-04T01:11:44.404Z (9 months ago)
- Language: HTML
- Size: 188 KB
- Stars: 7
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-hugo - hugo-inline-svg - A theme component for inlining SVG. Comes with CSS for displaying as blog, or inline with text. (Theme Components / Non-Official)
README
# Hugo Inline SVG [
](https://gohugo.io/)
[](https://github.com/future-wd/hugo-inline-svg/blob/master/LICENSE)
[](https://github.com/future-wd/hugo-inline-svg/tags)
[](https://go.dev/)
[](https://github.com/budparr/awesome-hugo)
## Simple Partial Usage
The "source" path is relative to the resources folder.
```HTML
{{ partial "inline-svg" "icons/bootstrap/envelope" }}
```
## Optional Arguments for Partial
To use the optional argument you must pass a dict as the partials context.
``` HTML
{{ partial "inline-svg" (dict "src" "icons/bootstrap/envelope" "fs" 2 "block" true "title" "Icon Title" "desc" "Icon Desc")}}
```
### Source
`src` points to the SVG file relative to the assets folder. The .svg suffix is optional.
### Display style
`display` can be set to the following:
- `inline` to `display:inline-block` and match the height of text (scale of 0.7em).
- `block` to `display:block` and have a scale of 1em. (default)
### Size
By default the SVG's are set to `font-size: inherit;` which allows the svg to take on the `font-size` of its parent. Aternatively you can override this behaviour with **EITHER** following options:
- `fs` can be set to 1-7. These sizes mirror bootstrap's font sizes with the addition of 7 which is 0.875 (.small or \)
- `rem` can be set to 1-5 which will set the `font-size` to 1-5rem. More granular control is available with `fs`.
### SVG Title
`title` adds a title tag which browsers pick up and display on hover. It also adds `aria-labelledby` to the SVG. (for assistive technology). The title is useful for desktop users, but does not add functionality for mobile users. (who aren't using assistive technology/screen readers)
### SVG Description
`description` adds a description tag and adds `aria-describedby` to the SVG. (for assistive technology)
## Shortcode usage
{{< inline-svg src="icons/bootstrap/envelope" block=true title="Icon Title" desc="Icon Desc" >}}
## Styling your icons
You need to wrap your partial or shortcode in a div or span and add CSS classes to change the size and color.
An example utilizing bootstrap 5's utility classes is as follows:
```HTML
{{ partial "inline-svg" "icons/bootstrap/envelope" }}
```
*fs-2 changes the font size for the svg and text-primary changes the line color to primary (blue by default).*
## Installation
### Import module
```YAML
# config.yaml
module:
imports:
- path: github.com/future-wd/hugo-inline-svg
```
### Import CSS
You need to import required css from `/assets/scss/inline-svg.scss'
```SCSS
// /assets/scss/index.scss ! if your file is not located here, you must adjust your import path !
@import "inline-svg.scss";
```