Make using illustrations in Vue components easier

Problem to solve

Currently, it's really tricky to include an SVG illustration from GitLab SVGs inside a vue component. This is because we pass all the illustrations to the asset pipeline, and they all come back revved. We need to generate the path in HAML and pass it down via prop drilling (or potentially the vuex store 😬) to the component that actually needs it.

For example, with the security dashboard empty state we have to do the following:

|_ index.haml (generate the svg path with rails helpers)
  |_ index.js (get the svg path from the dataset and pass it down as a prop)
    |_ app.vue (take that prop and pass it straight on down)
      |_ security_dashboard.vue (keep passing that prop)
        |_ security_dashboard_table.vue (keep passing that prop)
          |_ gl_empty_state.vue (actually use the prop)

Intended users

• Sasha (Software Developer)

Proposal

It would be nicer if we had a way of getting that illustration from the lowest level.

e.g.

<gl-empty-state :svgPath="getIllustration('securityDashboardEmptyState') />

The above is just an example, I'll take whatever approach is easier to impliment.

What does success look like, and how can we measure that?

Success would be any way of being able to get the path inside a vue component without intervention from a HAML file.

Links / references