Everybody likes Emoji—except Matt Walsh. In an effort to to break up the monotony with text, I decided to implement my own codified graphic accents in text.

While searching for the answer to a question many have asked before, I came across this excellent solution to using simple SVG icons and graphics in Gridsome. Turns out Andrjs Abrickis and his amazing brain had the same idea and reached an amazing conclusion in code.

Andrejs' Vue Svg Icon Repo also see his Write up on Medium.

Tedium

There's one HUGE downside to this method and that is you have to roll with fully outlined SVG—no strokes, just fills.

In my workflow, I ended up with a 'dirty' SVG folder (as drawn from software), and a 'clean' SVG folder (everything removed that didn't make a final drawing).

Implementation

48 x 48px form-factor. Simple, right? No.

Biggest issue was getting the component to render globally in Vue, which meant taking it to the main JS script—this took longer to figure out that I'd like to admit.

// Import main css
import '~/assets/style/index.scss'

// Import default layout so we don't need to import it to every page
import DefaultLayout from '~/layouts/Default.vue'
import SvgPathIcon from '~/components/SvgPathIcon.vue'

// The Client API can be used here. Learn more: gridsome.org/docs/client-api
export default function (Vue, { router, head, isClient }) {

// Set default layout as a global component
Vue.component('Layout', DefaultLayout),
Vue.component('SvgPathIcon', SvgPathIcon)
}

[ WIP ARTICLE ]

# SVG

Vue Inline SVG Icon Trick