ref(svg): convert jsx svgs to raw svgs (#6843)

NOTE: this does not include icon-file-generic and icon-open!!

* icon-bitbucket and icon-github

* icon-checkmark-sm and icon-warning-sm

* icon-chevron-right and icon-chevron-left

* enable svg-sprite-loader on storybook

* icon-circle-exclamation and icon-close-lg

* icon-search

* redo all icons on the new settings root page

* always be specific about what kind of unit we want when using the size attribute

* fix new icon added to accountNotifications

* use dashed linecap and linejoin attribues

.storybook/webpack.config.js

@@ -32,6 +32,17 @@ module.exports = {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],
       },
+      {
+        test: /app\/icons\/.*\.svg$/,
+        use: [
+          {
+            loader: 'svg-sprite-loader',
+          },
+          {
+            loader: 'svgo-loader',
+          },
+        ],
+      },
       {
         test: /\.less$/,
         use: [
@@ -48,6 +59,7 @@ module.exports = {
       },
       {
         test: /\.(woff|woff2|ttf|eot|svg|png|gif|ico|jpg)($|\?)/,
+        exclude: /app\/icons\/.*\.svg$/,
         loader: 'file-loader?name=' + '[name].[ext]',
       },
     ],

src/sentry/static/sentry/app/components/broadcastModal.jsx

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import createReactClass from 'create-react-class';
-import IconCloseLg from '../icons/icon-close-lg';
+
+import InlineSvg from '../components/inlineSvg';
 import ConfigStore from '../stores/configStore';
 import ApiMixin from '../mixins/apiMixin';
 import {logAjaxError} from '../utils/logging';
@@ -130,7 +131,7 @@ const BroadcastModal = createReactClass({
                     this.setState({index: this.state.index + 1});
                   }}
                 >
-                  <IconCloseLg />
+                  <InlineSvg src="icon-close-lg" />
                 </span>
               </div>
               {message({close: this.close})}

src/sentry/static/sentry/app/components/errors/detailedError.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import {t} from '../../locale';
-import IconCircleExclamation from '../../icons/icon-circle-exclamation';
+import InlineSvg from '../../components/inlineSvg';
 
 class DetailedError extends React.Component {
   static propTypes = {
@@ -31,7 +31,7 @@ class DetailedError extends React.Component {
     return (
       <div className={cx}>
         <div className="detailed-error-icon">
-          <IconCircleExclamation />
+          <InlineSvg src="icon-circle-exclamation" />
         </div>
         <div className="detailed-error-content">
           <h4>{heading}</h4>

src/sentry/static/sentry/app/components/inlineSvg.jsx

@@ -1,17 +1,20 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import styled from 'react-emotion';
 
-const InlineSvg = ({src, size, width, height}) => {
+const InlineSvg = ({src, size, width, height, style, className}) => {
   const {id, viewBox} = require(`../icons/${src}.svg`).default;
 
   return (
-    <svg
+    <StyledSvg
       viewBox={viewBox}
       width={width || size || '1em'}
       height={height || size || '1em'}
+      style={style || {}}
+      className={className || ''}
     >
       <use href={`#${id}`} xlinkHref={`#${id}`} />
-    </svg>
+    </StyledSvg>
   );
 };
 
@@ -20,6 +23,12 @@ InlineSvg.propTypes = {
   size: PropTypes.string,
   width: PropTypes.string,
   height: PropTypes.string,
+  style: PropTypes.object,
+  className: PropTypes.string,
 };
 
+const StyledSvg = styled('svg')`
+  vertical-align: middle;
+`;
+
 export default InlineSvg;

src/sentry/static/sentry/app/icons/icon-checkmark-sm.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import Icon from 'react-icon-base';
-
-function IconCheckmarkSm(props) {
-  return (
-    <Icon viewBox="0 0 9 9" {...props}>
-      <g
-        stroke="currentColor"
-        strokeWidth="1"
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <polyline points="0.5 5 2.5 7 8.5 2" />
-      </g>
-    </Icon>
-  );
-}
-
-export default IconCheckmarkSm;

src/sentry/static/sentry/app/icons/icon-checkmark-sm.svg

@@ -0,0 +1,11 @@
+<svg viewBox="0 0 9 9">
+  <g
+    stroke="currentColor"
+    stroke-width="1"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <polyline points="0.5 5 2.5 7 8.5 2" />
+  </g>
+</svg>

src/sentry/static/sentry/app/icons/icon-chevron-left.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import Icon from 'react-icon-base';
-
-function IconChevronLeft(props) {
-  return (
-    <Icon viewBox="0 0 15 15" {...props}>
-      <g
-        stroke="currentColor"
-        strokeWidth="1"
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <polyline points="10.5051954 14.4948046 4.50519544 7.49480456 10.498744 0.505195444 10.498744 0.505195444" />
-      </g>
-    </Icon>
-  );
-}
-
-export default IconChevronLeft;

src/sentry/static/sentry/app/icons/icon-chevron-left.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 15 15">
+  <polyline
+    stroke="currentColor"
+    stroke-width="1"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    points="10.5051954 14.4948046 4.50519544 7.49480456 10.498744 0.505195444 10.498744 0.505195444"
+  />
+</svg>