From 61476ee40b4595aba64c45371c8b345b037fddbc Mon Sep 17 00:00:00 2001 From: Allan White Date: Mon, 22 Jul 2019 11:27:50 -0700 Subject: [PATCH 1/2] Readme - formatting, installation Fixed markdown formatting problems; added installation notes. --- README.md | 33 +++++++++++++++++++-------------- 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index e822ffb..8d99ccd 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,12 @@ -#SVG +# SVG + Allows you to manipulate inline SVGs, including injecting classes, width and height properties, and a11y configuration. -##Version 2 +## Installation + +Download the [zip file](https://github.com/benfurfie/statamic-svg/archive/master.zip) and add the `svg` folder to your Statamic Addons folder (typically `/site/addons/`). Then, in the command line, run `php please update:addon` from your Statamic root path. Composer will update the plugin, which you can check on your Addons view in the control panel. + +## Version 2 This is version two of the plugin. I've pretty much refactored the entire addon and changed some bits that I wasn't happy with. Breaking changes are listed below: @@ -11,20 +16,20 @@ This parameter is now `class`, rather than `classes`. Other than that, it remain Also, due to some changes, it is no longer necessary to run `php please addons:update` before you can use it. It will still say it isn't installed, but you can ignore that! -##Usage +## Usage This tag will output an inline SVG. But that's what the output modifier is for I hear you cry. Believe me. This addon will make your life so much easier that you'll want to cry and name your first born after me... okay, that's maybe too far, but it will make your life a hell of a lot easier. The only parameter that is necessary with this tag is src (otherwise, what will it output). You can define this as a path to your asset container, or you can refer to a fieldset key. -``` .language-yaml +```yaml {{ svg src="/assets/svg/phone.svg" }} ``` or -``` .language-yaml +```yaml --- icon: /assets/svg/phone.svg --- @@ -34,17 +39,17 @@ icon: /assets/svg/phone.svg will work. As I said before, the only crucial thing at the moment is that you need to store your SVGs in an assets container. -##Additional parameters +## Additional parameters Okay, so that's cool, but that's nothing `{{ icon | output }}` couldn't do. The real power of the addon is that you can pass through additional parameters and have them output in the SVG. -###Classes +### Classes You can pass classes into your SVG by using the `class` parameter. This is especially useful if you use TailwindCSS and want to avoid having to create non-class-based CSS. Let's say you have a solid icon you want to change the colour of. Maybe it's pulled through from the font awesome library and so you can't edit the code, otherwise it'll get wiped out next time you update it. (Want to hazard a guess as to why I built this addon?). All you'd need to do if you wanted to make that SVG teal is pass through the following classes: -``` .language-yaml +```yaml --- icon: /assets/svg/phone.svg --- @@ -54,10 +59,10 @@ icon: /assets/svg/phone.svg You can also pass through height, width and whatever other classes you want to, including its focus, hover, media and active states. -###Width and Height +### Width and Height Want to set the width and the height of an SVG without editing the code of the SVG itself? Easy... -``` .language-yaml +```yaml --- icon: /assets/svg/phone.svg --- @@ -65,10 +70,10 @@ icon: /assets/svg/phone.svg {{ svg src="{ icon }" width="40" height="40" }} ``` -###A11Y +### Accessibility (a11y) Want to add a title to an SVG to enable those using screen readers to be able to understand what an SVG is all about? Simply pass through something like below and it'll add a title to the SVG. -``` .language-yaml +```yaml --- icon: /assets/svg/phone.svg --- @@ -78,7 +83,7 @@ icon: /assets/svg/phone.svg Of course, you can also pass through any page data you want to as well, meaning anyone using the CP can also add accessiblity text. For example, if they add a title to an asset, you can pull it through using the [assets tag](https://docs.statamic.com/tags/assets#single-assets) like so: -``` .language-yaml +```yaml --- icon: /assets/svg/phone.svg --- @@ -88,4 +93,4 @@ icon: /assets/svg/phone.svg {{ /assets:icon }} ``` -*Image credit: [Pankaj Patel – Unsplash](https://unsplash.com/photos/Ylk5n_nd9dA)* \ No newline at end of file +*Image credit: [Pankaj Patel – Unsplash](https://unsplash.com/photos/Ylk5n_nd9dA)* From 8973fe04b1b6315544ca74cd21ba288a065d44ff Mon Sep 17 00:00:00 2001 From: Allan White Date: Tue, 23 Jul 2019 09:47:11 -0700 Subject: [PATCH 2/2] Minor fixes to pass automated checks - renamed header to pass check - Removed bit about not needing to run `php please update:addon`, as it seems to be still required to activate the plugin. - Reorganized the readme so basic info is at the top. Should be easier for new users to follow but help existing ones find their changes. --- README.md | 20 +++++--------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 8d99ccd..6bac505 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,17 @@ # SVG -Allows you to manipulate inline SVGs, including injecting classes, width and height properties, and a11y configuration. +This addon lets you inline and manipulate inline SVGs, including injecting classes, width and height properties, and a11y configuration. "But that's what the [output modifier](https://docs.statamic.com/tags/theme-output) is for!", I hear you cry. Believe me — this addon will make your life so much easier, that you'll want to cry and name your first-born after me... okay, that's maybe too far, but it will make your life a hell of a lot easier. ## Installation - Download the [zip file](https://github.com/benfurfie/statamic-svg/archive/master.zip) and add the `svg` folder to your Statamic Addons folder (typically `/site/addons/`). Then, in the command line, run `php please update:addon` from your Statamic root path. Composer will update the plugin, which you can check on your Addons view in the control panel. ## Version 2 -This is version two of the plugin. I've pretty much refactored the entire addon and changed some bits that I wasn't happy with. - -Breaking changes are listed below: - -### Classes -This parameter is now `class`, rather than `classes`. Other than that, it remains the same. - -Also, due to some changes, it is no longer necessary to run `php please addons:update` before you can use it. It will still say it isn't installed, but you can ignore that! +This is version two of the plugin. I've pretty much refactored the entire addon and changed some bits that I wasn't happy with. **The only breaking change** is to the CSS parameter: this is now `class`, rather than `classes`. Other than that, it remains the same. ## Usage -This tag will output an inline SVG. But that's what the output modifier is for I hear you cry. Believe me. This addon will make your life so much easier that you'll want to cry and name your first born after me... okay, that's maybe too far, but it will make your life a hell of a lot easier. - -The only parameter that is necessary with this tag is src (otherwise, what will it output). +The only parameter that is necessary with this tag is `src` (otherwise, it won't know what to output). -You can define this as a path to your asset container, or you can refer to a fieldset key. +You can define this as a path to your asset container, or you can refer to a fieldset key (note the single brackets). ```yaml {{ svg src="/assets/svg/phone.svg" }} @@ -42,7 +32,7 @@ will work. As I said before, the only crucial thing at the moment is that you ne ## Additional parameters Okay, so that's cool, but that's nothing `{{ icon | output }}` couldn't do. The real power of the addon is that you can pass through additional parameters and have them output in the SVG. -### Classes +### Injecting CSS Classes You can pass classes into your SVG by using the `class` parameter. This is especially useful if you use TailwindCSS and want to avoid having to create non-class-based CSS. Let's say you have a solid icon you want to change the colour of. Maybe it's pulled through from the font awesome library and so you can't edit the code, otherwise it'll get wiped out next time you update it. (Want to hazard a guess as to why I built this addon?).