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

1 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

      :src="fields.image.value.src" >

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

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
    Commented May 29, 2018 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. Commented May 30, 2018 at 10:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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