feat: add new 12 and 16px icon sets (#45)

BREAKING CHANGE: source files are now partitioned into directories by size. Instead of finding icons under `src/14-[name].svg` or `src/26-[name].svg`, they are now located under `src/14/[name].svg` or `src/26/[name].svg`.

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

.github/CONTRIBUTING.md

@@ -67,7 +67,8 @@ commands are available:
 
 ## SVG Optimization Workflow
 
-Get SVG designs from Illustrator (not Sketch) and inspect the source.
+Get SVG designs from Illustrator (not Sketch). Ensure all visible
+`stroke` and `fill` properties are colored `red`. Inspect the source:
 
 1. Ensure the `viewBox` is clean. It should contain a "normal" value
    like `0 0 64 64` (where this SVG has been right-sized for a maximum
@@ -83,12 +84,14 @@ Get SVG designs from Illustrator (not Sketch) and inspect the source.
 1. Edit the optimized SVG source file.
     1. Swap out any leftover `<defs>` and `<use>` elements, eliminating
        all internal xlink and references.
-    1. Remove any leftover `xmlns:xlink`, `id`, `class`, `style` or
-       `data-*` attributes – we don't use these.
+    1. Remove any leftover `xmlns:xlink` and `data-*` attributes – we
+       don't use these.
     1. Attempt to remove `fill-rule="evenodd"` – it’s usually not
        needed.
     1. Remove unnecessary `stroke-linejoin` attributes where there are
        no lines to join.
+    1. Remove unnecessary `stroke-linecap` attributes where there are no
+       lines to cap.
     1. Make color corrections.
         1. For monochrome SVGs, make sure all foreground fill and
            stroke attributes are set to `currentColor`. This allows

.github/PULL_REQUEST_TEMPLATE.md

@@ -15,6 +15,8 @@
 
 <!-- supporting details; screen shot, code, etc. -->
 
+<!-- closes GITHUB_ISSUE -->
+
 ## Checklist
 
 * [ ] :ok_hand: SVG updates are Garden Designer approved (add the

.svgo.yml

@@ -1,19 +1,23 @@
 js2svg:
   pretty: true
   indent: '  '
+multipass: true
 plugins:
   - addAttributesToSVGElement:
       attributes:
         - focusable: false
-  - addAttributesToSVGElement:
-      attributes:
         - 'height'
         - 'width'
   - convertColors:
-      currentColor: '#000'
+      currentColor: 'red'
+  - inlineStyles:
+      onlyMatchedOnce: false
   - removeAttrs:
       attrs:
         - 'baseProfile'
+        - 'class'
+        - 'clip-rule'
+        - 'id'
         - 'stroke-miterlimit'
         - 'version'
   - removeTitle: true

.travis.yml

@@ -5,6 +5,7 @@ node_js:
 branches:
   only:
     - master
+    - /^v\d+\.\d+\.\d+(-\S*)?$/
 
 cache:
   yarn: true

README.md

@@ -20,10 +20,10 @@ for the configuration needed to install `@zendesk`-scoped packages.
 
 ## Usage
 
-Garden SVGs come in to flavors – monochrome and two-tone. The primary
+Garden SVGs come in two flavors – monochrome and two-tone. The primary
 fill/stroke will always be specified as `currentColor`. This means CSS
 text `color` style will cascade to the icon. Two-tone icons can receive
-a secondary color via the `fill` style attribute. In the following
+a secondary color via the `fill` style property. In the following
 example, the top arrow of the "sort" icon will be blue; the bottom arrow
 will be red (see _spritemap_ below for more re: SVG `use` with an
 external source).
@@ -34,9 +34,9 @@ external source).
 </svg>
 ```
 
-Once installed, SVG icons may accessed in a variety of ways. The
-following list demonstrates several possibilities. However, usage will
-vary depending on the particulars of your application.
+Once installed, SVG icons may be accessed in a variety of ways. The
+following list demonstrates several possibilities, however usage will
+vary depending on the particular needs of your application.
 
 * **JavaScript**
 
@@ -120,12 +120,11 @@ Got issues with what you find here? Please feel free to create an
 [issue](https://github.com/zendeskgarden/svg-icons/issues/new).
 
 If you'd like to take a crack at making some changes, please follow our
-[contributing](https://github.com/zendeskgarden/svg-icons/blob/master/.github/CONTRIBUTING.md)
-documentation for details needed to submit a PR.
+[contributing](.github/CONTRIBUTING.md) documentation for details needed
+to submit a PR.
 
 Community behavior is benevolently ruled by a [code of
-conduct](https://github.com/zendeskgarden/svg-icons/blob/master/.github/CHANGELOG.md).
-Please participate accordingly.
+conduct](.github/CODE_OF_CONDUCT.md). Please participate accordingly.
 
 ## License
 

demo/12px/index.html

@@ -2,27 +2,28 @@
 <html>
 <head>
   <title>SVG Icons: 12 px / Assets / Zendesk Garden</title>
-  <link href="http://zendeskgarden.github.io/css-bedrock/index.css" rel="stylesheet">
-  <link href="http://zendeskgarden.github.io/css-components/menus/index.css" rel="stylesheet">
-  <link href="http://zendeskgarden.github.io/css-components/forms/index.css" rel="stylesheet">
-  <link href="http://zendeskgarden.github.io/css-components/tags/index.css" rel="stylesheet">
-  <link href="http://zendeskgarden.github.io/site.css" rel="stylesheet">
+  <link href="//zendeskgarden.github.io/css-components/bedrock/index.css" rel="stylesheet">
+  <link href="//zendeskgarden.github.io/css-components/menus/index.css" rel="stylesheet">
+  <link href="//zendeskgarden.github.io/css-components/forms/index.css" rel="stylesheet">
+  <link href="//zendeskgarden.github.io/css-components/tags/index.css" rel="stylesheet">
+  <link href="//zendeskgarden.github.io/index.css" rel="stylesheet">
   <link href="../index.css" rel="stylesheet">
+  <link href="//zendeskgarden.github.io/css-components/utilities/index.css" rel="stylesheet">
   <style>
   .c-main svg { font-size: 12px; }
   </style>
 </head>
 <body>
   <header class="c-header">
     <figure class="c-header__logo">
-      <a class="u-fg-inherit" href="http://zendeskgarden.github.io">
+      <a class="u-fg-inherit" href="//zendeskgarden.github.io">
         <svg class="c-header__logo__svg svg-square">
           <use xlink:href="../index.svg#zd-svg-icon-26-zendesk">
         </svg>
       </a
     ></figure
     ><h1 class="c-header__title"
-      ><a class="u-fg-inherit" href="http://zendeskgarden.github.io/assets">Assets</a>
+      ><a class="u-fg-inherit" href="//zendeskgarden.github.io/assets">Assets</a>
       <span>/ SVG Icons: 12 px</span>
     </h1>
     <ul class="c-ctl c-ctl--header">
@@ -60,10 +61,10 @@ <h1 class="c-main__title">SVG Icons: 12 px</h1>
       </div>
     </div>
   </main>
-  <script src="http://zendeskgarden.github.io/site.js"></script>
-  <script src="http://zendeskgarden.github.io/css-components/menus/index.js"></script>
-  <script src="http://zendeskgarden.github.io/css-components/forms/checkbox/index.js"></script>
-  <script src="http://zendeskgarden.github.io/css-components/forms/range/index.js"></script>
+  <script src="//zendeskgarden.github.io/index.js"></script>
+  <script src="//zendeskgarden.github.io/css-components/menus/index.js"></script>
+  <script src="//zendeskgarden.github.io/css-components/forms/checkbox/index.js"></script>
+  <script src="//zendeskgarden.github.io/css-components/forms/range/index.js"></script>
   <script src="../index.js"></script>
   <script src="index.js"></script>
 </body>