Skip to content

Commit

Permalink
fix: update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
sean-au committed Jan 9, 2023
1 parent 33cd87e commit 212c4ed
Showing 1 changed file with 7 additions and 39 deletions.
46 changes: 7 additions & 39 deletions readme.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
# Hugo Inline SVG
# Hugo Inline SVG [<img src="https://d33wubrfki0l68.cloudfront.net/c38c7334cc3f23585738e40334284fddcaf03d5e/2e17c/images/hugo-logo-wide.svg" align="right" width="250">](https://gohugo.io/)

[![GitHub License](https://img.shields.io/github/license/future-wd/hugo-responsive-images?style=flat-square)](https://github.com/future-wd/hugo-inline-svg/blob/master/LICENSE)
[![GitHub release (latest SemVer including pre-releases)](https://img.shields.io/github/v/release/future-wd/hugo-inline-svg?include_prereleases&style=flat-square)](https://github.com/future-wd/hugo-inline-svg/releases)
[![GoLang version"](https://img.shields.io/github/go-mod/go-version/future-wd/hugo-inline-svg?style=flat-square)](https://go.dev/)
<!-- [![Awesome](https://awesome.re/badge-flat.svg)](https://awesome.re) -->

## Simple Partial Usage

Expand Down Expand Up @@ -29,7 +34,7 @@ To use the optional argument you must pass a dict as the partials context.
`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.
- `block` to `display:block` and have a scale of 1em. (default)

### Size

Expand Down Expand Up @@ -90,40 +95,3 @@ Or instead run the following partial in the projects head to compile the scss (s
```HTML
{{- partial "svg-font/css" . }}
```

## Example Output

### Input

``` HTML
{{ partial "inline-svg" (dict "src" "icons/bootstrap/envelope" "em" 2 "block" true "title" "Email Address" "desc" "Email address of business")}}
```

```HTML
<!-- /assets/icons/bootstrap/envelope.svg -->
<!-- sourced from https://icons.getbootstrap.com/icons/envelope/ -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"/>
</svg>
```

### Output

```HTML
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" role="img" height="16" width="16" viewBox="0 0 16 16" class="svg-font em-1 d-block" aria-labelledby="e072ecbe2bee2c0d727360049ba7e5cb-title" aria-describedby="e072ecbe2bee2c0d727360049ba7e5cb-desc">
<title id="e072ecbe2bee2c0d727360049ba7e5cb-title">Email Address</title>
<desc id="e072ecbe2bee2c0d727360049ba7e5cb-desc">Email address of business</desc>
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"></path>
</svg>
```

```CSS
.svg-font {
font-size: inherit;
color: inherit;
fill: currentColor;
vertical-align: middle; }
.svg-font.em-2 {
height: 2em;
width: 2em; }
```

0 comments on commit 212c4ed

Please sign in to comment.