1

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

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"
        }
      }
    }
  }
  • 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 '18 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 '18 at 10:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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