How can i add an svg with a sc-link JSS with VUE JS?

Question

I want to add svg icons in the footer with links <sc-link>, how can i do that?

Answer 1

What you are looking for is a way to provide an image (svg, png, jpeg...) wrapped in a link, like a Facebook icon.

I think you need create a new component : "link-image" with values from sc-link and others from sc-image ( src, alt, title, target ).

In your components/link-image.vue

<template>
    <a 
    :class="fields.link.value.class" 
    :href="fields.link.value.href" 
    :title="fields.link.value.title" 
    :target="fields.link.value.target">
      <img 
      :alt="fields.image.value.alt"
      :src="fields.image.value.src" >
    </a>
</template>

<script>
 export default {
   name: 'LinkImage',
   props: {
     fields: {
       type: Object,
       default: () => ({}),
     }
   }
 };
</script>

In your sitecore/definitions/components/LinkImage.sitecore.js

import { addComponent, CommonFieldTypes, SitecoreIcon } from '@sitecore-jss/sitecore-jss-manifest';

export default (manifest) => {
  addComponent(manifest, {
    name: 'LinkImage',
    displayName: 'Link Image',
    icon: SitecoreIcon.Airbrush,
    fields: [
      { name: 'link', type: CommonFieldTypes.GeneralLink },
      { name: 'image', type: CommonFieldTypes.Image }
    ],
  });
};

In your src/app/componentFactory.js Add

import LinkImage from './components/link-image.vue';

components.set('LinkImage', LinkImage);

In your data/routes/en.json:

  {
    "componentName": "LinkImage",
    "fields": {
      "link": {
        "value": {
          "href": "https://www.google.com",
          "title": "Google",
          "target": "_blank",
          "class": ""
        }
      },
      "image": {
        "value": {
          "src": "/assets/img/google-logo.svg",
          "alt": "Google"
        }
      }
    }
  }