Are You Tired Of Importing Icons To Your Flutter App?
The project designer just finished the new project, and you are about to start coding. You are assigning custom colors, shadows, gradients, and assets. When it comes to importing custom icons, it takes time to create variables for each icon by navigating through all icon files in the folder.
Using a shell script to extract file names may help you to import icons easily. Navigating to the icon files directory and running the following command creates the .txt file with file names.
ls -1 > filenames.txt
Once you get the file names, you can copy-paste them into a new dart file with a class named AppIcons and by the multi-line selection you can import icons.
Please be careful of special words. For example, do not name icon names as false.svg or import. svg. Use false_icon.svg or true_icon.svg as the naming of icon files.
Another easy way to import custom icons is to download the create_app_icons.sh file and run it in the same directory as your SVG files. It will create a class named AppIcons in app_icons.dart file, create variables with “static const String” type, and assign SVG files to corresponding variables.
‘’’
#!/bin/bash
# File to write output to
output_file=app_icons.dart
# Create filenames file
ls -1 | grep .svg$ > filenames.txt
# Create output file
echo “class AppIcons {“ > $output_file
# Read filenames from file
while read filename; do
# Convert filenames to lowerCamelCase
varname=$(echo “$filename” | awk ‘{print tolower(substr($0,1,1)) substr($0,2)}’ | sed ‘s/\.[^.]*$//’ | sed ‘s/_\([a-z]\)/\u\1/g’)
# Add the output to the output file
echo “ static const String $varname = ‘assets/icons/$filename’;” >> $output_file
done < filenames.txt
# Close output file
echo “}” >> $output_file
‘’’
You can also copy the bash script above, paste it on your text editor and save it as create_app_icons.sh. Do not forget to give execute permission to the create_app_icons.sh file. You can do it by “chmod +x create_app_icons.sh”.
After you create the create_app_icons.sh file and give execute permission, run the script by “./create_app_icons.sh” command on the terminal.
I generated the bash scripts in this content using ChatGPT. My prompts to create the final bash script are as follows,
- hi there, can you write a terminal command to copy file names to a .txt file?
- how to create variables from file names in filenames.txt file with camel case style. for example static const String overviewFilled = ‘assets/icons/overview_filled.svg’;
- how to save the output to AppIcons class in the dart file?
- how to make this bash script executable?
- how to combine two bash scripts to create AppIcons class in dart by first generating file names with .svg extension, then creating variables and saving the output in AppIcons class?
-can you make the variable names lowerCamelCase and output file name app_icons.dart
- thank you so much!
