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

up vote 1 down vote accepted

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"
        }
      }
    }
  }
  • Note that this won't be editable in the Sitecore experience editor (but it will work fine in disconnected mode). Use of the JSS-provided field rendering helpers is needed to support experience editor. Support for link bodies using those is coming in the next release. – Kam Figy May 29 at 14:36
  • @kamFigy, I tested it and it's editable in Experience Editor. Because I define my types ( GeneralLink and Image ) I can change the link and the image in edit mode. – tomagladiator May 30 at 10:47

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.