loading words...

Feb 19, 2019 13:25:00

My draft

by @swizecteller | 200 words | 5🔥 | 102💌

Swizec Teller

Current day streak: 5🔥
Total posts: 102💌
Total words: 28628 (114 pages 📄)

Yesterday I discovered you can embed images in SVG and my mind is blown #200wordsTIL

This opens a whole new world of possibilities.


```

import roleIcon from "../assets/roles.svg";

const IconInSVG = ({x, y}) => (

<image x={x} y={y} href={roleIcon} />

)

```


The image tag works much the same as your trusty img tag. Replace src with href and you're set.

You can use SVG-native positioning with x and y attributes. Or configure those via CSS since most SVG attributes are "presentational" these days.


Oh you haven't heard of "presentational" attributes?

It means they listen to CSS. If you ain't keen on adding a bunch of attributes, you can use CSS. Even styled-components.


```

import roleIcon from "../assets/roles.svg";

const Image = styled.image`

x: 10;

y: 10

`;

const IconInSVG = () => (

<Image href={roleIcon} />

)

```

I think that's neat.


<a big gif of "oh that's neat" comes here>


Also I need another 50 words for 200words to be happy but ther eisn't much more to say here about this little trick so I'm gonna do a little cheating. If anyone is reading please don't judge me I try my best )


one two three four five six seven eight nine ten eleven twelve thirteen


Originally published at twitter.com

contact: email - twitter / Terms / Privacy