Skip to content

SVG sprites in meteor-vue #120

New issue
New issue
Open
Open
SVG sprites in meteor-vue#120
Assignees
Akryum
Labels
question
@AsafAgranat

Description

@AsafAgranat
AsafAgranat
opened on Feb 22, 2017

I’ve been trying to incorporate dynamic svg-sprites to my project, but I’m not succeeding.
I have tried the following npm packages: vue-svg-sprite, vue-svg-directive and vue-svg, to no avail.
I believe I didn’t quite figure out the meteor-vue integration so I’m failing to add the packages properly.
I was wondering if anyone coud kindly point out to how I can go about adding svg-sprites to meteor-vue, and making it work

Activity

AsafAgranat

AsafAgranat commented on Feb 22, 2017

@AsafAgranat
AsafAgranat
on Feb 22, 2017
Author

I've created an icon component, which is pretty simple:

<template>
	<svg class="icon">
		<use v-bind="{ 'xlink:href': '#' + symbol }"></use>
	</svg>
</template>

<script>
	export default {
	  props: [
	  	'symbol'
	  ]
	}
</script>

To make it work, i have placed my SVG symbols in the main.html, within the body tag, like so:

<body>    
    <app></app>

    <svg style="display: none;" aria-hidden="true">
        <symbol id="name1" width="24" height="24" viewBox="0 0 24 24">
            <path d="..." />
        </symbol>
        <symbol id="name2" width="24" height="24" viewBox="0 0 24 24">
            <path d="..." />
        </symbol>
       <symbol id="name3" width="24" height="24" viewBox="0 0 24 24">
            <path d="..." />
        </symbol>     
    </svg>

</body>

But this is obviously not the way to go about it. Can someone help on how to call/ajax an external SVG file and keep it in the cache/storage?

Akryum
self-assigned this
on Feb 27, 2017
Akryum

Akryum commented on Mar 6, 2017

@Akryum
Akryum
on Mar 6, 2017
Collaborator

Maybe we could try doing a demo project with the best practices to use SVG and integrate SVG-related vue packages into Meteor.

Akryum
added
question
on Mar 6, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

question

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @Akryum@AsafAgranat

      Issue actions
        SVG sprites in meteor-vue · Issue #120 · meteor-vue/vue-meteor