Skip to content

Instantly share code, notes, and snippets.

@fraaalk
Last active May 8, 2018 04:22
Show Gist options
  • Select an option

  • Save fraaalk/bba86589548bd7de6c022b77bd4103d7 to your computer and use it in GitHub Desktop.

Select an option

Save fraaalk/bba86589548bd7de6c022b77bd4103d7 to your computer and use it in GitHub Desktop.
IE11 unable to render dynamic svg
<template>
<svg
class="ui-icon"
v-html="icon">
</svg>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
name: 'UiIcon',
computed: {
...mapGetters({
icons: 'icons/getIcons',
}),
icon() {
return this.icons[`${this.name}.svg`];
},
},
props: {
name: {
type: String,
required: true,
},
},
};
</script>
export default {
state: {
icons: {
login: "<svg viewBox=\"0 0 24 24\"><path d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z\" /></svg>"
},
},
getters: {
getIcons: state => state.icons,
},
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment