Instructions for adding Custom SVG Icons

Standard Operating Procedure: Converting SVG Icons to Use currentColor

Objective:

To streamline the process of preparing SVG icons so their colors can be dynamically changed using CSS, specifically converting certain elements to use currentColor.

Tools Required:

Adobe Illustrator
Python (installed on your system)
A text editor (e.g., Notepad++, VSCode, Sublime Text)
Terminal (macOS/Linux) or Command Prompt (Windows)

Steps:

Step 1: Create and Export SVG Icons in Adobe Illustrator

Design Icons:
- Create your icon designs in Adobe Illustrator.
- Ensure each element is appropriately colored. For instance, black circles (#231f20) and white numbers (#ffffff).
Export as SVG:
- Go to File > Export > Export As….
- Select SVG (*.SVG) as the file type.
- Click Export.
- In the SVG Options dialog, set the following:
  - Styling: Presentation Attributes
  - Font: Convert to Outlines
  - Images: Embed
  - Object IDs: Layer Names
  - Decimal: 2
  - Minify: Checked
  - Responsive: Checked
- Click OK to export the SVG file.

Step 2: Prepare the Python Script

Save the Script:
- Open your text editor.
- Copy and paste the following Python script:
- Save the file as “replace_svg_color.py”.

				
					import os

directory = '.'  # Current directory

for filename in os.listdir(directory):
    if filename.endswith(".svg"):
        filepath = os.path.join(directory, filename)
        with open(filepath, 'r', encoding='utf-8') as file:
            content = file.read()
        
        # Replace specific fill colors with currentColor
        content = content.replace('fill="#231f20"', 'fill="currentColor"')
        content = content.replace('fill="#fff"', 'fill="currentColor"')
        
        with open(filepath, 'w', encoding='utf-8') as file:
            file.write(content)

print("All SVG files have been updated.")

Step 3: Execute the Python Script

Move Files:
- Move replace_svg_color.py to the directory containing your exported SVG files.
Open Terminal/Command Prompt:
- On macOS/Linux, open Terminal.
- On Windows, open Command Prompt.
Navigate to the Directory:
- Use the cd command to navigate to the directory containing your script and SVG files. For example:

				
					cd "/Users/MrBobHunter-MacPro/Temp/Elementor Number Icons"

Run the script

Execute the script using Python 3:

				
					python3 replace_svg_color.py

Modify the Functions.php File

To import the modified SVG files, the following must be added to the Child Theme’s functions.php file:

				
					function add_svg_to_upload_mimes( $file_types ) {
    $new_filetypes = array();
    $new_filetypes['svg'] = 'image/svg+xml';
    $file_types = array_merge( $file_types, $new_filetypes );
    return $file_types;
}
add_filter( 'upload_mimes', 'add_svg_to_upload_mimes' );

Standard Operating Procedure: Converting SVG Icons to Use currentColor

Objective:

Tools Required:

Steps:

Modify the Functions.php File

Final Result: Color changing icons

Vendor Management Partners helps businesses recover what's rightfully theirs through strategic, ethical, and effective debt collection.