When pushing a BigCommerce theme, icons in the assets/icons directory no longer appear. However, when you inspect your theme, the icon is properly bundled and pushed to your theme. BigCommerce also doesn’t allow you to add SVG files to the Image Manager, so it appears that you are out of luck. However, this issue can be solved! To fix the issue, you can use the grunt CLI tool to properly bundle SVG images and use them within our custom themes.
Adding SVGs to a Theme: Step by step
To properly use SVGs within our theme, we need to ensure they are added to our projects and referenced within the API correctly. Here are the steps for properly uploading an SVG to a BigCommerce theme.
Step 1: Add the SVG to your theme’s assets/icons directory.
Step 2: Once the SVG is added to your icons directory, you will need to use grunt to add the image to the themes icon sheet. First, use NPM to install grunt if you don’t have it.
npm install -g grunt-cli npm install
Step 3: Now that you have installed grunt, you can run it by running grunt in your terminal.
If you get an error, you can run grunt --force, which should fix the issue.
Step 4: Next, you need to add the SVG to a theme file. Below is an example. When referencing the file name, you need to prefix it with #icon- so the pattern will be as follows #icon-<FileNameHere>
<svg><use xlink:href="#icon-exampleFileName" /></svg>
Congrats! You have SVG icons in your BigCommerce themes!
Additional Notes About SVGs
Here are a couple more things to note about SVGs when you are working with them:
- You can not reference an SVG via the CDN
- You can not reference an SVG with the <img> tag
Author: Maxwell Sherwin
Got stuck on a step in this article?
We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes, there is a related feature to enable or a field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so that we can update this article!