Replace cart with another SVG (7.1)

Tried searching the forum but seems no one's asked on how to use an SVG as a replacement for the cart icon. I don't want to use a PNG, because I wouldn't be able to control the color at that point.

I started using the following code to replace the default cart icon but the SQS interface wouldn't let me upload an SVG (odd, right?), so I couldn't define a background-image url. Since I can't upload an SVG file (unless I'm missing something), how can I leverage the raw SVG code to replace the default cart icon?

https://broccoli-parakeet-js8k.squarespace.com/

Site Password: duckdogelk

// cart icon
.header .header-actions-action--cart svg {
  stroke:transparent!important
} .header-actions-action--cart .icon-cart-quantity {
  display:none
} .header .header-actions-action--cart {
  background-image: url(image-url-here); background-size: contain
}

You can upload an CVG file by going to the pages menu, then adding a link, click file, then upload the SVG there, and make note of the file URL. Then go back to the CSS and add that file URL. Hope that helps!

Perfect. That works, thank you!

Hmm.. the icon seems to not be reliably showing up after implementing the code below. It seems to only be visible when I'm in the Custom CSS view. Thoughts anyone?

Custom CSS view

Standard view

// cart
.header .header-actions-action--cart svg {
  stroke: transparent !important;
} .header-actions-action--cart .icon-cart-quantity {
  display: none;
} .header .header-actions-action--cart {
  background-image: url('/s/shopping-cart.svg');
  background-size: contain;
}

Hmm, try adding  !important after each of the lines, before the semi-colon

That didn't work. Is there a way to instead use the raw SVG code rather than rely on an SVG file to load, perhaps?

Sorry, I'm not sure, have you tried viewing the website in an incognito window to check if it's working live?

It's possible that the code is not sizing the SVG correctly, can you try adding a small height and width value to the CSS?

You could also try a different coding: 

https://www.rebeccagracedesigns.com/blog/custom-cart-icon

www.ghostplugins.com/steps/your-own-shopping-cart-icon-text

Neither of those seemed to work 😕. Still getting the same behavior (visible in Custom CSS view, not anywhere else including in an incognito window).

// CUSTOM ICONOGRAPHY
// cart
.header .header-actions-action--cart svg {
  stroke: transparent !important;
}
.header-actions-action--cart .icon-cart-quantity {
  display: none !important;
}
/* .header .header-actions-action--cart {
  background-image: url('/s/shopping-cart.svg') !important;
  background-size: contain !important;
  height: 32px !important;
}*/
.icon--cart {   
  svg {     
    display: block !important;
  }   
  background-image: url('https://broccoli-parakeet-js8k.squarespace.com/s/shopping-cart.svg') !important;   
  background-size: 32px 32px !important;   
  background-repeat: no-repeat !important; 
}

pretty certain your url didn't upload correctly as if you visit the svg link directly it's just a blank screen. To be honest though, for just a small SVG like this, I'd encode it with a data url and then you can just do it all in CSS and you won't have to upload it anywhere.

• go to a website like this SVG to Data URI encoder (heyallan.github.io),
• copy your svg code in (just open your file with a text editor)
• click encode
• copy the output into your url (it will read something like url("data:image/svg+xml,....."))

should work just fine.

further thought:
If I was being totally honest, I'm not mad keen on the idea of putting the background-image rule directly on the SVG. doesn't sit right with me. I think it would be better to hide the SVG and then apply your background css rules to the containing link element. something like this

.header-actions-action.header-actions-action--cart svg,
.header-actions-action.header-actions-action--cart .icon-cart-quantity {
  display: none !important;
}

.header-actions-action.header-actions-action--cart a {
	display:block;
	width: 32px;
	height: 32px;
	background-size: 32px 32px;
	background-image: url("data:image/svg+xml,%3Csvg stroke='currentColor' fill='currentColor' stroke-width='0' viewBox='0 0 24 24' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Shopping_Cart' dataName='Shopping Cart'%3E%3Cpath d='M2.86,3.95H2.85l.05.53Z'%3E%3C/path%3E%3Cg%3E%3Cpath d='M6.217,15.662a2.492,2.492,0,0,0,2.49,2.27h9.07a2.492,2.492,0,0,0,2.49-2.27l.67-7.52a1.478,1.478,0,0,0-.39-1.15,1.507,1.507,0,0,0-1.11-.49H6.407l-.14-1.82a1.752,1.752,0,0,0-1.74-1.61h-.97a.5.5,0,0,0-.5.5.508.508,0,0,0,.5.5h.97a.752.752,0,0,1,.75.69Zm13.05-.09a1.492,1.492,0,0,1-1.49,1.36H8.707a1.492,1.492,0,0,1-1.49-1.36L6.487,7.5h12.95a.49.49,0,0,1,.37.16.516.516,0,0,1,.13.39Z'%3E%3C/path%3E%3Ccircle cx='9.946' cy='19.928' r='1'%3E%3C/circle%3E%3Ccircle cx='16.436' cy='19.928' r='1'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

Thank you, and all that makes sense and is helpful. We're set here.