Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andrewmcodes/bridgetown-inline-svg
ARCHIVED migrated to bridgetown-svg-inliner
https://github.com/andrewmcodes/bridgetown-inline-svg
archived bridgetown bridgetown-legacy bridgetown-plugin liquid svg
Last synced: 3 days ago
JSON representation
ARCHIVED migrated to bridgetown-svg-inliner
- Host: GitHub
- URL: https://github.com/andrewmcodes/bridgetown-inline-svg
- Owner: andrewmcodes
- License: gpl-3.0
- Archived: true
- Created: 2020-07-11T10:34:41.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-20T03:15:46.000Z (over 2 years ago)
- Last Synced: 2024-10-31T13:55:00.458Z (20 days ago)
- Topics: archived, bridgetown, bridgetown-legacy, bridgetown-plugin, liquid, svg
- Language: Ruby
- Homepage: https://github.com/ayushn21/bridgetown-svg-inliner
- Size: 105 KB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
## 🚨 Archived
This gem has been replaced by [ayushn21/bridgetown-svg-inliner] and has now been archived since it will not be receiving any future updates as Bridgetown v1.0.0 approaches, which will not be compatible with this gem.
**Upgrade to [ayushn21/bridgetown-svg-inliner] which has a MIT License and works with the latest versions of Bridgetown.**
---
bridgetown-inline-svg
## Installation
Run this command to add this plugin to your site's Gemfile:
```shell
bundle add bridgetown-inline-svg -g bridgetown_plugins
```
Or add the following to your `Gemfile`:
```ruby
group :bridgetown_plugins do
gem "bridgetown-inline-svg", "~> 1.1.0"
end
```
## Optional Configuration
```yml
# bridgetown.config.yml
svg:
# Whether to optimize the SVG files with svg_optimizer.
#
# Type: Boolean
# Optional: true
# Default: false
optimize: true
```
## Usage
This plugin provides the `svg` Liquid tag to your site.
Use the tag in your pages, collections, and components by passing the tag the name of a file:
```liquid
{% svg path/to/my.svg %}
```
**Note**: The `.svg` file extension is required.
### Attributes
Set attributes like you would in HTML:
```liquid
{% svg assets/svg/square.svg width=24 class="text-indigo-600" foo="bar" %}
```
Bridgetown will include the SVG file in your output HTML like this:
```html
```
**Note**: Anything can be passed through, but we'd recommend setting [valid attributes].
#### Height and Width
`height` is automatically set to match `width` if omitted, and vice versa. Height cannot be left unset because IE11 won't use the viewport attribute to calculate the image's aspect ratio.
### Paths
Paths with a space should be quoted with single or double quotes:
```liquid
{% svg "/path/to/my asset.svg" %}
```
If the path is not in quotes, anything after the __first space__ will be considered an attribute.
Relative paths and absolute paths will both be interpreted from Bridgetown's `src` directory:
```liquid
{% svg "/path/to/my.svg" %}
{% svg "path/to/my.svg" %}
```
Should resolve to `/your/site/src/path/to/my.svg`.
### Variables
Liquid variables will be interpolated if enclosed in double brackets:
```liquid
{% assign svg_name="my" %}
{% assign size=40 %}
{% svg "/path/to/{{svg_name}}.svg" width="{{size}}" %}
```
This is helpful inside of Liquid components!
### Optimizations
Processing is done to remove useless data when enabled in the Bridgetown config:
- metadata
- comments
- unused groups
- Other filters from [svg_optimizer]
- default size
If any important data gets removed, or the output SVG looks different from input, it's a bug. Please file an issue to this repository describing your problem.
It does not perform any input validation on attributes. They will be appended as-is to the root node.
## Contributing
Contributions, issues and feature requests are welcome!
Feel free to check [issues page]. You can take a look at the [contributing guide].
## Acknowledgement
This project was initially forked from [jekyll-inline-svg].
## License
Copyright © 2017-2020 [Sebastien Dumetz]
Copyright © 2020 [Andrew Mason]
The following code is a derivative work of the code from the [jekyll-inline-svg] project, which is licensed GPLv3. This code therefore is also licensed under the terms of the GNU Public License, verison 3.
[ayushn21/bridgetown-svg-inliner]: https://github.com/ayushn21/bridgetown-svg-inliner
[Bridgetown, unlike this gem.]: https://bridgetownrb.com
[valid attributes]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg#Attributes
[svg_optimizer]: https://github.com/fnando/svg_optimizer
[issues page]: https://github.com/andrewmcodes/bridgetown-inline-svg/issues
[contributing guide]: https://github.com/andrewmcodes/bridgetown-inline-svg/blob/main/CONTRIBUTING.md
[jekyll-inline-svg]: https://github.com/sdumetz/jekyll-inline-svg
[Sebastien Dumetz]: https://github.com/sdumetz
[Andrew Mason]: https://github.com/andrewmcodes