Merge pull request #1453 from hypothesis/add-svg-icons

Help & Tutorial 1/n: Add and update SVG icons

src/images/icons/annotate.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="currentColor" fill-rule="nonzero" d="M15 0c.27 0 .505.099.703.297A.961.961 0 0116 1v15l-4-3H1a.974.974 0 01-.703-.29A.953.953 0 010 12V1C0 .719.096.482.29.29A.966.966 0 011 0h14zM7 3l-.469.063c-.312.041-.656.187-1.031.437-.375.25-.719.646-1.031 1.188C4.156 5.229 4 6 4 7l.002.063.006.062a.896.896 0 01.008.11l-.002.074-.006.066a1.447 1.447 0 00.43 1.188C4.729 8.854 5.082 9 5.5 9c.417 0 .77-.146 1.063-.438C6.854 8.271 7 7.918 7 7.5c0-.417-.146-.77-.438-1.063A1.447 1.447 0 005.5 6c-.073 0-.146.005-.219.016-.073.01-.14.026-.203.046.177-1.03.542-1.632 1.094-1.804L7 4V3zm5 0l-.469.063c-.312.041-.656.187-1.031.437-.375.25-.719.646-1.031 1.188C9.156 5.229 9 6 9 7l.002.063.006.062a.896.896 0 01.008.11l-.002.074-.006.066a1.447 1.447 0 00.43 1.188c.291.291.645.437 1.062.437.417 0 .77-.146 1.063-.438.291-.291.437-.645.437-1.062 0-.417-.146-.77-.438-1.063A1.447 1.447 0 0010.5 6c-.073 0-.146.005-.219.016-.073.01-.14.026-.203.046.177-1.03.542-1.632 1.094-1.804L12 4V3z"/>
+</svg>

src/images/icons/arrow-left.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--arrow-left"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12L3 8l4-4M4 8h9-9z"></path></g></svg>

src/images/icons/arrow-right.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 4l4 4-4 4m3-4H3h9z"></path></g></svg>

src/images/icons/highlight.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="currentColor" fill-rule="nonzero" d="M16 13.344V16H0v-2.656h16zM9.328 2.172l2.5 2.5-6.656 6.672h-2.5v-2.5l6.656-6.672zM11.773 0c.146 0 .277.043.393.13l.084.073 1.547 1.563a.603.603 0 01.203.46.639.639 0 01-.13.393l-.073.084L12.5 4 10 1.5 11.297.203A.652.652 0 0111.773 0z"/>
+</svg>

src/images/icons/reply.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="currentColor" fill-rule="nonzero" d="M6.422 5.422c2 0 3.542.417 4.625 1.25 1.083.833 1.875 1.75 2.375 2.75s.792 1.917.875 2.75l.125 1.25h-2l-.094-.938c-.062-.625-.281-1.312-.656-2.062-.375-.75-.969-1.438-1.781-2.063-.813-.625-1.97-.937-3.47-.937H4.829l2 2-1.406 1.422L1 6.422 5.422 2l1.406 1.422-2 2h1.594z"/>
+</svg>

src/sidebar/components/svg-icon.js

@@ -8,6 +8,9 @@ const propTypes = require('prop-types');
 // The list of supported icons
 const icons = {
   add: require('../../images/icons/add.svg'),
+  annotate: require('../../images/icons/annotate.svg'),
+  'arrow-left': require('../../images/icons/arrow-left.svg'),
+  'arrow-right': require('../../images/icons/arrow-right.svg'),
   cancel: require('../../images/icons/cancel.svg'),
   'collapse-menu': require('../../images/icons/collapse-menu.svg'),
   'expand-menu': require('../../images/icons/expand-menu.svg'),
@@ -18,11 +21,13 @@ const icons = {
   facebook: require('../../images/icons/facebook.svg'),
   groups: require('../../images/icons/groups.svg'),
   help: require('../../images/icons/help.svg'),
+  highlight: require('../../images/icons/highlight.svg'),
   leave: require('../../images/icons/leave.svg'),
   lock: require('../../images/icons/lock.svg'),
   logo: require('../../images/icons/logo.svg'),
   public: require('../../images/icons/public.svg'),
   refresh: require('../../images/icons/refresh.svg'),
+  reply: require('../../images/icons/reply.svg'),
   share: require('../../images/icons/share.svg'),
   twitter: require('../../images/icons/twitter.svg'),
 };