Use SVGs inline

missive · Sep 29, 2017 · 81f39b1 · 81f39b1
1 parent 3502927
commit 81f39b1
Show file tree

Hide file tree

Showing 12 changed files with 55 additions and 30 deletions.
diff --git a/src/components/anchors.js b/src/components/anchors.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import * as SVGs from '../svgs'
+import SVGs from '../svgs'
 
 export default class Anchors extends React.Component {
   constructor(props) {
@@ -23,8 +23,7 @@ export default class Anchors extends React.Component {
     return <div className='emoji-mart-anchors'>
       {categories.map((category, i) => {
         var { name, anchor } = category,
-            isSelected = name == selected,
-            SVGElement = SVGs[name]
+            isSelected = name == selected
 
         if (anchor === false) {
           return null
@@ -38,7 +37,7 @@ export default class Anchors extends React.Component {
             className={`emoji-mart-anchor ${isSelected ? 'emoji-mart-anchor-selected' : ''}`}
             style={{ color: isSelected ? color : null }}
           >
-            <SVGElement />
+            <div dangerouslySetInnerHTML={{ __html: SVGs[name] }}></div>
             <span className='emoji-mart-anchor-bar' style={{ backgroundColor: color }}></span>
           </span>
         )

diff --git a/src/svgs/activity.svg b/src/svgs/activity.svg
diff --git a/src/svgs/custom.svg b/src/svgs/custom.svg
diff --git a/src/svgs/flags.svg b/src/svgs/flags.svg
diff --git a/src/svgs/foods.svg b/src/svgs/foods.svg
diff --git a/src/svgs/index.js b/src/svgs/index.js
diff --git a/src/svgs/nature.svg b/src/svgs/nature.svg
diff --git a/src/svgs/objects.svg b/src/svgs/objects.svg
diff --git a/src/svgs/people.svg b/src/svgs/people.svg
diff --git a/src/svgs/places.svg b/src/svgs/places.svg
diff --git a/src/svgs/recent.svg b/src/svgs/recent.svg
diff --git a/src/svgs/symbols.svg b/src/svgs/symbols.svg