Merge pull request #2 from benfurfie/feature/2.0.0

Feature/2.0.0

README.md

@@ -0,0 +1,91 @@
+#SVG
+Allows you to manipulate inline SVGs, including injecting classes, width and height properties, and a11y configuration.
+
+##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!
+
+##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
+{{ svg src="/assets/svg/phone.svg" }}
+```
+
+or 
+
+``` .language-yaml
+---
+icon: /assets/svg/phone.svg
+---
+
+{{ svg src="{ icon }" }}
+```
+
+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
+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
+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
+---
+icon: /assets/svg/phone.svg
+---
+
+{{ svg src="{ icon }" class="fill-current text-teal" }}
+```
+
+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
+Want to set the width and the height of an SVG without editing the code of the SVG itself? Easy...
+
+``` .language-yaml
+---
+icon: /assets/svg/phone.svg
+---
+
+{{ svg src="{ icon }" width="40" height="40" }}
+```
+
+###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
+---
+icon: /assets/svg/phone.svg
+---
+
+{{ svg src="{ icon }" a11y="An icon of a phone to indicate that this is part of a phone number" }}
+```
+
+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
+---
+icon: /assets/svg/phone.svg
+---
+
+{{ assets:icon }}
+    {{ svg src="{ url }" a11y="{ title }" }}
+{{ /assets:icon }}
+```
+
+*Image credit: [Pankaj Patel – Unsplash](https://unsplash.com/photos/Ylk5n_nd9dA)*

svg/SvgTags.php

@@ -0,0 +1,161 @@
+<?php
+/**
+ * 
+ */
+namespace Statamic\Addons\Svg;
+
+use InlineSvg\Collection;
+use InlineSvg\Transformers\Cleaner;
+use Statamic\API\Asset;
+use Statamic\Extend\Tags;
+
+require __DIR__ . '/vendor/autoload.php';
+
+class SvgTags extends Tags
+{
+  /**
+   * The {{ svg }} tag
+   * 
+   * @return mixed
+   */
+  public function index()
+  {
+    // Intial config
+    $file = $this->getParam('src');
+    $name = $this->getFileName($file);
+    $container = $this->getContainerUrl($file);
+    $path = $this->getFilePath($file);
+    $folder = $this->getAssetFolder($path);
+    $fullPath = $this->getFullAssetFolderPath($container, $folder);
+
+    // Set up the InlineSVG collection
+    $collection = $this->getCollection($fullPath);
+
+    // Check to see if we want to allow IDs. If we do, move on; else scrub any IDs.
+    $allowIds = $this->getParam('allowIds');
+    if(!$allowIds)
+    {
+      $collection->addTransformer(new Cleaner());
+    }
+
+    // Check to see if there is any accessibility text for the SVGs.
+    $a11y = $this->getA11y();
+
+    // Get any config (classes/height/width etc) from the SVG tag.
+    $config = $this->getSvgConfig();
+
+    // Return the SVG with config and a11y.
+    return $collection->get($name)->withAttributes($config)->withA11y($a11y);
+  }
+
+  /**
+   * Getter for the a11y parameter in the tag.
+   *
+   * @return string
+   */
+  public function getA11y()
+  {
+    return $this->getParam('a11y');
+  }
+
+  /**
+   * Getter for the class, height, and width parameters in the tag.
+   *
+   * @return string
+   */
+  public function getSvgConfig()
+  {
+    // Get the config from the params
+    $class = $this->getParam('class');
+    $height = $this->getParam('height');
+    $width = $this->getParam('width');
+
+    // Add the config to an array and return it.
+    return [
+      'class' => ((false) ? null : $class),
+      'height' => ((false) ? null : $height),
+      'width' => ((false) ? null : $width)
+    ];
+  }
+
+  /**
+   * Init a collection from InlineSVG
+   *
+   * @param string $fullPath Pass through the path to the SVG's containing folder
+   * @return void
+   */
+  public function getCollection($fullPath)
+  {
+    return Collection::fromPath($fullPath);
+  }
+
+  /**
+   * Gets and returns the asset folder path as a string.
+   * 
+   * @param string $path The path to the file
+   * @return string
+   */
+  public function getAssetFolder($path)
+  {
+    // First, explode and then reverse the array.
+    // We do this so we can easily remove the file itself.
+    $reversedArray = array_reverse(explode('/', $path));
+
+    // Now the array is flipped, remove the file.
+    $removeFile = array_shift($reversedArray);
+
+    // Reverse the reversed array back, convert to string, and return.
+    return implode('/', array_reverse($reversedArray));
+  }
+
+  /**
+   * Get the full folder path for the SVG being called.
+   * This is used by InlineSVG's collection class.
+   *
+   * @param string $container
+   * @param string $folder
+   * @return Collection
+   */
+  public function getFullAssetFolderPath($container, $folder)
+  {
+    return getcwd() . $container . '/' . $folder;
+  }
+
+  /**
+   * Get the asset's container URL.
+   *
+   * @param string The path to the SVG
+   * @return string
+   */
+  public function getContainerUrl($file)
+  {
+    $asset = Asset::find($file);
+    $container = $asset->container();
+    return $container->url();
+  }
+
+  /**
+   * Get the name of the asset.
+   *
+   * @param string The path to the SVG
+   * @return string
+   */
+  public function getFileName($file)
+  {
+    $asset = Asset::find($file);
+    return $asset->filename();
+  }
+
+  /**
+   * Get the path to the asset file.
+   *
+   * @param string The path to the SVG
+   * @return string
+   */
+  public function getFilePath($file)
+  {
+    $asset = Asset::find($file);
+    return $asset->path();
+  }
+
+}

svg/composer.json

@@ -0,0 +1,8 @@
+{
+  "name": "statamic-svg",
+  "autoload": {
+    "classmap": [
+      "./"
+    ]
+  }
+}

meta.yaml → svg/meta.yaml

@@ -1,5 +1,5 @@
 name: SVG
-version: "1.0"
+version: "2.0"
 description: 
 url: https://github.com/benfurfie/statamic-svg.git
 developer: Ben Furfie