treehouse
/
emoji-mart-lazyload
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use svg-jsx for anchors 

Fixes a React warning when using svg-inline-react
release
Etienne Lemay 2017-05-27 14:52:38 -04:00
parent 3332c525d4
commit 1d57c216f5
5 changed files with 104 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example/webpack.config.js
View File

@ -22,7 +22,7 @@ module.exports = {
},
{
test: /\.svg$/,
loader: 'svg-inline',
loaders: ['babel?presets[]=react', 'svg-jsx?es6=true'],
include: [
path.resolve('src/svgs'),
],

3
package.json
View File

@ -43,8 +43,7 @@
"react": "^15.5.4",
"react-dom": "^15.5.4",
"rimraf": "2.5.2",
"svg-inline-loader": "0.4.1",
"svg-inline-react": "1.0.2",
"svg-jsx-loader": "^0.0.16",
"webpack": "1.12.14"
},
"scripts": {

6
src/components/anchors.js
View File

@ -1,6 +1,5 @@
import React from 'react'
import PropTypes from 'prop-types'
import InlineSVG from 'svg-inline-react'
import * as SVGs from '../svgs'
@ -28,7 +27,8 @@ export default class Anchors extends React.Component {
return <div className='emoji-mart-anchors'>
{categories.map((category, i) => {
var { name, anchor } = category,
isSelected = name == selected
isSelected = name == selected,
SVGElement = SVGs[name]
if (anchor === false) {
return null
@ -42,7 +42,7 @@ export default class Anchors extends React.Component {
className={`emoji-mart-anchor ${isSelected ? 'emoji-mart-anchor-selected' : ''}`}
style={{ color: isSelected ? color : null }}
>
<InlineSVG src={SVGs[name]} />
<SVGElement />
<span className='emoji-mart-anchor-bar' style={{ backgroundColor: color }}></span>
</span>
)

2
src/webpack.config.js
View File

@ -35,7 +35,7 @@ module.exports = {
},
{
test: /\.svg$/,
loader: 'svg-inline?removeSVGTagAttrs=false',
loaders: ['babel?presets[]=react', 'svg-jsx?es6=true'],
include: [
path.resolve('src/svgs'),
],

112
yarn.lock
View File

@ -745,6 +745,10 @@ camelcase@^1.0.2:
version "1.2.1"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
camelcase@^2.0.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
caseless@~0.12.0:
version "0.12.0"
resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
@ -789,6 +793,14 @@ cliui@^2.1.0:
right-align "^0.1.1"
wordwrap "0.0.2"
cliui@^3.0.3:
version "3.2.0"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
dependencies:
string-width "^1.0.1"
strip-ansi "^3.0.1"
wrap-ansi "^2.0.0"
clone@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
@ -936,7 +948,7 @@ debug@2.6.7, debug@^2.1.1, debug@^2.2.0:
dependencies:
ms "2.0.0"
decamelize@^1.0.0:
decamelize@^1.0.0, decamelize@^1.1.1:
version "1.2.0"
resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@ -1413,6 +1425,10 @@ invariant@^2.2.0:
dependencies:
loose-envify "^1.0.0"
invert-kv@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
is-binary-path@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
@ -1652,6 +1668,12 @@ lazy-cache@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
lcid@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
dependencies:
invert-kv "^1.0.0"
loader-utils@^0.2.11, loader-utils@^0.2.5:
version "0.2.17"
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
@ -1661,11 +1683,11 @@ loader-utils@^0.2.11, loader-utils@^0.2.5:
json5 "^0.5.0"
object-assign "^4.0.1"
lodash@^3.10.0, lodash@^3.8.0:
lodash@^3.10.0, lodash@^3.5.0, lodash@^3.8.0:
version "3.10.1"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
lodash@^4.2.0, lodash@^4.5.0:
lodash@^4.0.0, lodash@^4.2.0, lodash@^4.5.0:
version "4.17.4"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
@ -1923,6 +1945,12 @@ os-homedir@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
os-locale@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
dependencies:
lcid "^1.0.0"
os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
@ -2034,6 +2062,10 @@ punycode@^1.2.4, punycode@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
q@^1.4.1:
version "1.5.0"
resolved "https://registry.yarnpkg.com/q/-/q-1.5.0.tgz#dd01bac9d06d30e6f219aecb8253ee9ebdc308f1"
qjobs@^1.1.4:
version "1.1.5"
resolved "https://registry.yarnpkg.com/qjobs/-/qjobs-1.1.5.tgz#659de9f2cf8dcc27a1481276f205377272382e73"
@ -2261,6 +2293,10 @@ safe-buffer@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.0.1.tgz#d263ca54696cd8a306b5ca6551e92de57918fbe7"
sax@>=0.6.0:
version "1.2.2"
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.2.tgz#fd8631a23bc7826bef5d871bdb87378c95647828"
semver@^5.3.0:
version "5.3.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
@ -2297,10 +2333,6 @@ signal-exit@^3.0.0:
version "3.0.2"
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
simple-html-tokenizer@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz#05c2eec579ffffe145a030ac26cfea61b980fabe"
slash@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
@ -2449,17 +2481,23 @@ supports-color@^3.1.0:
dependencies:
has-flag "^1.0.0"
svg-inline-loader@0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/svg-inline-loader/-/svg-inline-loader-0.4.1.tgz#4018885c35f7875e075ba21b725961faeb9fd527"
svg-jsx-loader@^0.0.16:
version "0.0.16"
resolved "https://registry.yarnpkg.com/svg-jsx-loader/-/svg-jsx-loader-0.0.16.tgz#7b8bfcdae00feddb16bbc9ecc5de682a9b9daa94"
dependencies:
loader-utils "^0.2.11"
object-assign "^4.0.1"
simple-html-tokenizer "^0.1.1"
svg-to-jsx "0.0.20"
svg-inline-react@1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/svg-inline-react/-/svg-inline-react-1.0.2.tgz#138dfd0eb7ac52d689c3aa0a10d1d0b134a7d081"
svg-to-jsx@0.0.20:
version "0.0.20"
resolved "https://registry.yarnpkg.com/svg-to-jsx/-/svg-to-jsx-0.0.20.tgz#47fbb672501f2598703f3c90eca26e64fd24d820"
dependencies:
object-assign "^4.0.1"
q "^1.4.1"
xml2js "^0.4.10"
xmlbuilder "^2.6.4"
yargs "^3.21.0"
tapable@^0.1.8, tapable@~0.1.8:
version "0.1.10"
@ -2678,6 +2716,10 @@ window-size@0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
window-size@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.4.tgz#f8e1aa1ee5a53ec5bf151ffa09742a6ad7697876"
wordwrap@0.0.2:
version "0.0.2"
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
@ -2686,6 +2728,13 @@ wordwrap@~0.0.2:
version "0.0.3"
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
wrap-ansi@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
dependencies:
string-width "^1.0.1"
strip-ansi "^3.0.1"
wrappy@1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@ -2701,10 +2750,45 @@ wtf-8@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/wtf-8/-/wtf-8-1.0.0.tgz#392d8ba2d0f1c34d1ee2d630f15d0efb68e1048a"
xml2js@^0.4.10:
version "0.4.17"
resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.17.tgz#17be93eaae3f3b779359c795b419705a8817e868"
dependencies:
sax ">=0.6.0"
xmlbuilder "^4.1.0"
xmlbuilder@^2.6.4:
version "2.6.5"
resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-2.6.5.tgz#6ff7ad60fb72d22764f007a164b77f2bf1400526"
dependencies:
lodash "^3.5.0"
xmlbuilder@^4.1.0:
version "4.2.1"
resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-4.2.1.tgz#aa58a3041a066f90eaa16c2f5389ff19f3f461a5"
dependencies:
lodash "^4.0.0"
xmlhttprequest-ssl@1.5.3:
version "1.5.3"
resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.3.tgz#185a888c04eca46c3e4070d99f7b49de3528992d"
y18n@^3.2.0:
version "3.2.1"
resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
yargs@^3.21.0:
version "3.32.0"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.32.0.tgz#03088e9ebf9e756b69751611d2a5ef591482c995"
dependencies:
camelcase "^2.0.1"
cliui "^3.0.3"
decamelize "^1.1.1"
os-locale "^1.4.0"
string-width "^1.0.1"
window-size "^0.1.4"
y18n "^3.2.0"
yargs@~3.10.0:
version "3.10.0"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"