Feather Appcetera Plugin

We were inspired by the fantastic and efficient https://feathericons.com/ by Cole Bemis.

Download your copy here

So this plugin provides simple support for their use via shortcodes.

SVG are a special format of the image. They are mathematical lines and shapes that define the image. This means that for simple logotype images and icons, they are very data efficient. They are also scalable to any size without loss of quality because they are just a mathematical formula.

Take a look at these simple icons from feather icons.

https://feathericons.com/ by Cole Bemis

We were so impressed with them, we thought we would write a simple plugin to use them as shortcodes in your content.

Inline Versus <img

These icons are simple and very compact. Here is the code for the Facebook icon

<svg xmlns="http://www.w3.org/2000/svg" width="56" height="24" viewBox="0 0 56 24"><path d="M20.9 19.3h-2.12v-1.24c-.8.94-1.5 1.4-2.23 1.4-.66 0-1.1-.3-1.34-.87-.12-.35-.22-.88-.22-1.67V7.9h2.12V17.16c.05.3.18.42.45.42.4 0 .78-.37 1.23-1V7.9h2.12v11.4M13.4 11.62c0-1.22-.23-2.13-.66-2.7-.56-.8-1.45-1.1-2.35-1.1-1.02 0-1.8.3-2.35 1.1-.44.57-.67 1.5-.67 2.7v4.07c0 1.2.2 2.04.64 2.6.56.8 1.48 1.2 2.37 1.2.9 0 1.82-.4 2.4-1.2.4-.56.6-1.4.6-2.6V11.6zm-2.1 4.3c.1 1.13-.25 1.7-.9 1.7-.66 0-1-.57-.9-1.7V11.4c-.1-1.13.24-1.66.9-1.66.65 0 1 .53.9 1.66v4.52zM5.03 13.1v6.2H2.8v-6.2S.47 5.46 0 4.04h2.35L3.92 10l1.56-5.95h2.34l-2.8 9.04" fill="#111111"/><path d="M42.74 9.7c-.33 0-.7.2-1.05.52v6.86c.33.34.7.5 1.04.5.6 0 .85-.42.85-1.55v-4.86c0-1.13-.27-1.46-.86-1.46M51.08 11.07c0-1.05-.27-1.36-.94-1.36-.67 0-.96.3-.96 1.35v1.25h1.9v-1.23" fill="#e62117"/><path d="M55.67 5.28s-.33-2.3-1.33-3.33C53.07.6 51.64.6 51 .53 46.33.2 39.32.2 39.32.2h-.02s-7 0-11.67.33c-.65.08-2.08.08-3.35 1.42-1 1.02-1.32 3.33-1.32 3.33s-.34 2.72-.34 5.44v2.55c0 2.72.34 5.43.34 5.43s.32 2.32 1.32 3.34c1.27 1.34 2.94 1.3 3.68 1.43 2.67.26 11.35.34 11.35.34s7.03 0 11.7-.34c.65-.08 2.07-.08 3.34-1.42 1-1.02 1.33-3.34 1.33-3.34S56 16 56 13.27v-2.55c0-2.72-.33-5.44-.33-5.44zM29.95 19.3h-2.23v-13h-2.35V4.18h7.04V6.3h-2.45v13zm8.05 0h-2.12v-1.24c-.8.94-1.5 1.4-2.23 1.4-.66 0-1.1-.3-1.34-.87-.12-.35-.22-.88-.22-1.67V8h2.12v9.17c.05.3.18.42.45.42.4 0 .78-.37 1.23-1V8H38v11.3zm7.7-3.38c0 1.04-.07 1.78-.2 2.26-.28.84-.87 1.27-1.67 1.27-.72 0-1.46-.44-2.14-1.28v1.14h-2.02V4.18h2V9.1c.66-.8 1.4-1.27 2.15-1.27.8 0 1.34.47 1.6 1.3.15.47.28 1.2.28 2.27v4.52zm4.46 1.67c.5 0 .8-.28.9-.83.02-.1.02-.6.02-1.42h2.12v.32c0 .66-.05 1.13-.07 1.33-.07.46-.23.87-.47 1.23-.56.82-1.4 1.22-2.45 1.22-1.05 0-1.85-.38-2.44-1.16-.43-.57-.7-1.4-.7-2.6v-3.96c0-1.2.25-2.14.68-2.72.58-.77 1.4-1.18 2.42-1.18s1.82.4 2.4 1.18c.4.58.65 1.46.65 2.67V14H49.2v2.02c0 1.05.3 1.57.98 1.57z" fill="#e62117"/></svg>

This means that it can be seen as more efficient to add this code into the page source, rather than referring to it as an external file, which then needs to be separately called and downloaded, although it could then benefit from any cache system in operation.

The other inline advantage is that we could change the parameters of the call. In our shortcode plugin, we can supply the height, width and colour of the lines to be used. This is then inserted into the SVG definition.

Inline

The plugin demonstrates the use of inline processing by providing a shortcode [feather] for some of the icons to be given, sized and set a line colour.

Images available

  1. Facebook
  2. Twitter
  3. Chrome
  4. Codepen
  5. Video – A video play icon.
  6. Instagram
  7. Youtube

Parameters

  • height: default 24
  • width: default 24
  • image: default Facebook

e.g. [feather image=”facebook” width=”35″ height=”35″ stroke=”#900″]

<img

All of the icons can be used by a second shortcode which refers to the folder and image and allows the height and width to be supplied.

Images available

All given at http://feathericons.com

Custom / Youtube

Parameters

  • height: default 24
  • width: default 24
  • folder: default core – we have kept to the same folder groups as the original collection.
  • image: default award

e.g. [svgsrc folder=”COMMUNICATION” image=”phone” width=”35″ height=”35″ ]

Custom Icons

We were quick to spot that the Youtube logo was not present. So we have added a custom folder and put that in. Although small, it is nowhere near as small and efficient as the feather icons.