This is not a question but a solution!
Pipeline Theme 7.2.2
So I was trying to find a way for my icons to inherit the same animations that occur on the Icon Columns block that Pipeline has. This meant going into the code, adding my own icon and getting it to appear on the dropdown and select it.
For this demonstration, I created a “Moving truck” icon. For the icon columns block, by default, you can either select icons that are already provided by the theme, or add an image. The problem with the image is that it doesn’t load in the same way as the icons do. It doesn’t have an animation. So, I decided to add my own icon to the default icons that the theme provides and it worked. I got my animation, exactly how I wanted.
Step 1: Create your icon
Find an icon you like and copy the svg code. I used Figma, right clicked, copy as svg. I also flattened in Figma my icon so the svg code wouldn’t be so long.
Step 2: Create and add your own icon to the code
Go to your snippets folder in the theme’s code and add a new snippet.
There are some things to consider here. The naming convention of your icon is very important, so pay attention. Different sections (icon columns, rich text, image banner, etc.) that provide a selection of icons have their own naming conventions for their respective blocks.
For the icon columns section, it’s “icon-art-[your Icon Name Here].liquid”. To find out what the other naming conventions are for other sections, just go to that section’s file and scroll down to where all the icon names appear. Looks something like this:
For my icon, I called it icon-art-moving-truck.liquid
Paste your svg code into that file.
It’s possible you may have to manipulate your svg code to make the code look similar to the other icons. Just refer to the other icon’s svg code in their liquid files (ex. icon-art-animal.liquid) if needed, but I don’t think it’s necessary.
Step 3: Make your icon selectable in the dropdown
In the first image of this post, you’ll see my Moving truck is available in the dropdown. Go to your section’s file. In my case, it’s section-icon.liquid and scroll to where you see a list of all the available icons (refer to image in step 2). Wherever you add your icon in this list, it’ll appear in that order on the dropdown. I put mine in the middle because everything is already in alphabetical order, so I kept with that.
The “value” attribute is referencing the name of your icon. Don’t be surprised if you don’t see “-art” prefix in the names. This is important for step 4. Just do what they do and name your icon the in the same way. The “label” is the actual name of the icon that you’ll see in the dropdown. Here’s my code:
{ "value": "icon-moving-truck", "label": "Moving truck" },
(don’t forget the comma if it’s not at the bottom of the list)
At this point, you will be able to select your icon in the section’s dropdown on your theme editor, but no icon will appear.
Step 4: Render the animation and your icon will appear
Locate your icon-setting.liquid file in your snippets folder. Insert this code with your own icon’s value you gave it in step 3 and its file name (minus the file extension):
Note: The name of the file may also be called “animated-icon.liquid” if you can’t find the first file.
{%- when 'icon-moving-truck' -%}
{%- render 'icon-art-moving-truck' -%}
I put my code just after the {% case filename -%} line, like so:
{%- case filename -%}
{%- when 'icon-moving-truck' -%}
{%- render 'icon-art-moving-truck' -%}
{%- when 'icon-award' -%}
{%- render 'icon-art-award' -%}
{%- when 'icon-basket-like' -%}
{%- render 'icon-art-basket-like' -%}
{%- when 'icon-basket-return' -%}
{%- render 'icon-art-basket-return' -%}
{%- when 'icon-cart-check' -%}
{%- render 'icon-art-cart-check' -%}
{%- when 'icon-cart-message' -%}
{%- render 'icon-art-cart-message' -%}
{%- when 'icon-chat' -%}
{%- render 'icon-art-chat' -%}
{%- when 'icon-dollar' -%}
{%- render 'icon-art-dollar' -%}
{%- when 'icon-email' -%}
{%- render 'icon-art-email' -%}
{%- when 'icon-lock-card' -%}
{%- render 'icon-art-lock-card' -%}
{%- when 'icon-lock-shield' -%}
{%- render 'icon-art-lock-shield' -%}
{%- when 'icon-lock-window' -%}
{%- render 'icon-art-lock-window' -%}
{%- when 'icon-payment' -%}
{%- render 'icon-art-payment' -%}
{%- when 'icon-phone' -%}
{%- render 'icon-art-phone' -%}
{%- when 'icon-rating' -%}
{%- render 'icon-art-rating' -%}
{%- when 'icon-send' -%}
{%- render 'icon-art-send' -%}
{%- when 'icon-shipment-world' -%}
{%- render 'icon-art-shipment-world' -%}
{%- when 'icon-shipment' -%}
{%- render 'icon-art-shipment' -%}
{%- when 'icon-store' -%}
{%- render 'icon-art-store' -%}
{%- when 'icon-support-headphones' -%}
{%- render 'icon-art-support-headphones' -%}
{%- when 'icon-animal' -%}
{%- render 'icon-art-animal' -%}
{%- when 'icon-earth' -%}
{%- render 'icon-art-earth' -%}
{%- when 'icon-leaf' -%}
{%- render 'icon-art-leaf' -%}
{%- when 'icon-water' -%}
{%- render 'icon-art-water' -%}
{%- when 'icon-truck' -%}
{%- render 'icon-art-truck' -%}
{%- when 'icon-animal-paw' -%}
{%- render 'icon-art-animal-paw' -%}
{%- when 'icon-gluten-free' -%}
{%- render 'icon-art-gluten-free' -%}
{%- when 'icon-iron' -%}
{%- render 'icon-art-iron' -%}
{%- when 'icon-legal' -%}
{%- render 'icon-art-legal' -%}
{%- when 'icon-recycled' -%}
{%- render 'icon-art-recycled' -%}
{%- when 'icon-ruler' -%}
{%- render 'icon-art-ruler' -%}
{%- when 'icon-sewing-machine' -%}
{%- render 'icon-art-sewing-machine' -%}
{%- when 'icon-shirt' -%}
{%- render 'icon-art-shirt' -%}
{%- when 'icon-shoes' -%}
{%- render 'icon-art-shoes' -%}
{%- when 'icon-star-rating' -%}
{%- render 'icon-art-star-rating' -%}
{%- when 'icon-thread' -%}
{%- render 'icon-art-thread' -%}
{%- when 'icon-washer' -%}
{%- render 'icon-art-washer' -%}
{%- endcase -%}
So going back to step 3, you’ll see why we removed the “-art” prefix. It’s being referred to in the icon-setting.liquid file. When it’s selected, it’ll render your icon.
In theory, you should be able to do this with all the blocks with icon options. Just name things accordingly and use the right section files! Hope this helps 