Comment puis-je importer un fichier svg pour une Vue de composant?
En vue de fichier unique composant.- Je importer un fichier svg comme ceci:
import A from 'a.svg'
Et puis, comment puis-je utiliser dans mon composant?
- de quoi avez-vous besoin? des tonnes de manque d'informations ici
- Cette question n'est pas de Vue spécifique, car elle dépend de la webpack chargeur que vous utilisez pour charger vos fichiers SVG. Que voulez-vous atteindre avec cette instruction d'importation? Voulez-vous
A
être une Chaîne de caractères contenant votre fichier SVG? Voulez-vous en ligne ou simplement inclurea.svg
dans votre modèle? Ne vous veulent simplement s'assurer quea.svg
est disponible lorsque votre composant est inséré? Veuillez transmettre votre question avec les cas d'utilisation, les parties pertinentes de votre Vue de Composant, et les parties pertinentes de votre webpack de configuration. - Non seulement est-il pas de Vue spécifique, il n'est pas Webpack spécifiques...
Vous devez vous connecter pour publier un commentaire.
Sur la base des informations que vous avez fournies, ce que vous pouvez faire est:
npm install --save-dev vue-svg-loader
JS:
JS:
Référence: https://github.com/visualfanatic/vue-svg-loader
Invalid Component Definition
- mais il a rapidement trouvé la raison de github.com/visualfanatic/vue-svg-loader/issues/1Si vous avez le contrôle sur le fichier svg, vous pouvez l'envelopper dans une vue de fichier comme ceci:
a.vue:
Il faut simplement le fichier comme ceci ensuite:
import A from 'a.vue'
Si vous utilisez Webpack vous pouvez utiliser le nécessitent contexte de charger des fichiers SVG à partir d'un répertoire. Être conscient que cela va mettre tous les fichiers SVG dans vos fichiers Javascript et peut gonfler votre code si.
Comme un exemple simplifié, je suis en utilisant ce
svg
composant:Le modèle ressemble simplement à ceci:
Normalement, vous ne pouvez pas il suffit de charger les fichiers SVG comme ça et s'attendent à être utilisé avec un
v-html
directive étant donné que vous êtes de ne pas obtenir les cru de sortie. Vous devez utiliser le Webpackraw-loader
donc, assurez-vous d'obtenir les cru de sortie:L'exemple ci-dessus utilise également le
svgo-loader
puisque vous voulez lourdement optimiser vos fichiers SVG si vous n'en bas de cette route.J'espère que cela vous aider ou quelqu'un d'autre sur comment résoudre ce problème sans plonger directement dans une solution tierce pour résoudre ce problème.
D'abord vous avez besoin d'un chargeur pour le composant qui va contenir le svg
mon webpack.base.config.js
docs de vues-svg-inline-chargeur : https://www.npmjs.com/package/vue-svg-inline-loader
docs de vue-svg-chargeur : https://www.npmjs.com/package/vue-svg-loader
Ensuite, vous pouvez initialiser une vue de fichier
Votre svg fils doit pas contenir de balise style de sorte de copier coller le style dans la vue de style avec l'étendue propoerty à garder spécifique de cette composante
vous pouvez simplement charger vous composant dans le lieu précis de votre application
et de l'utiliser
J'aime utiliser carlin comme un moteur de template (livré avec de nombreux avantages) - si vous le faites, vous serez en mesure d'inclure facilement des fichiers comme SVG est juste en écrivant:
HTML:
Que c'est! il n'y a rien d'autre à faire - je pense que c'est une très moyen facile et pratique d'inclure des choses comme les petits svg du fichier est facilement inclus code est toujours propre!
Ici, vous pouvez obtenir plus d'information comment inclure PugJS en vous Vue instance https://www.npmjs.com/package/vue-cli-plugin-pug
Vous pouvez toujours enregistrer en tant que .fichier svg dans votre
/static/svg/myfile.svg
(à l'aide de webpack) et juste l'utiliser comme un fichier image:<img src="/static/svg/myfile.svg">
. Pas besoin /import /chargeur requis.fill:currentColor