🪄 Conjure images, icons and favicons for your frontend project.
In most frontend projects, you have to perform the same and rather boring actions with images between exporting them from Figma and deploying the project to the server. Spare yourself from this routine!
Conjure is a command line utility for optimizing vector images, converting raster images to modern formats for different pixel densities and also preparing favicons.
To install Conjure, you need to have Node.js installed on your machine. You can then install it via npm or pnpm in your project (or globally, then replace -D
flag with -g
):
npm add @firefoxic/conjure -D
or
pnpm add @firefoxic/conjure -D
Conjure is invoked via the command line:
-
with globally installation:
conjure <command> [options]
-
with locally installation (in a project):
npm exec conjure <command> [options]
or
pnpm exec conjure <command> [options]
-
without installation:
npm exec @firefoxic/conjure <command> [options]
or
pnpm dlx @firefoxic/conjure <command> [options]
-
images
— Optimize SVGs and convert raster images to modern formats (Webp and Avif by default). -
icons
— Optimize SVG icon files. -
favicons
— Convert the original SVG favicons (expect at least one oftouch.svg
,32.svg
, and16.svg
) to optimized vector and all raster favicons, including ICO format and necessary PNG and Webp, and also generate a webmanifest (read this article about favicons by Andrey Sitnik). -
all
— Run all the above commands.Notice: Individual commands handle the contents of the specified directory. But the general
all
command expects the path to the directory containing theimages
,icons
andfavicons
directories (see examples below).
-
Type:
String
-
Default:
src/shared
- Description: Path to the directory containing raw files
-
Type:
String
-
Default: the value of
--inputDirectory
- Description: Path to the directory where processed files will be placed
-
Type:
Number
-
Default:
2
- Description: Pixel density in dppx of the raw raster images
-
Type:
String
-
Default:
webp,avif
- Description: Comma-separated list of formats for output raster images
-
Type:
Boolean
-
Default:
false
- Description: Add the original raster format to the list of output formats
-
Type:
Boolean
-
Default:
false
- Description: Remove the original raster files and source favicons after successful processing
-
In the
source/images
folder, optimize all SVGs and convert the raster images towebp
andavif
formats at the original size for2x
pixel density and at a reduced size for1x
pixel density; and after processing the raster images, delete their original files:conjure images --inputDirectory=source/images --removeOrigin
If you have finally managed to give up old formats (such as JPG and PNG) and use only modern Webp and Avif, it is better to export raster layers from Figma only to PNG. JPG will only add artifacts on them. Avoid unnecessary quality loss.
-
Take all vector and raster images from the
raws/images
folder; optimize vector images and put them insource/images
; convert raster images towebp
format and to the original format, optimizing them for2x
and1x
pixel densities, placing these results also insource/images
; when processing is completed, delete the original raster images fromraws/images
:conjure images -i raws/images -o source/images -f webp -a -r
-
Optimize SVG icons in the default
src/shared/icons
folder:conjure icons
-
In the
assets/favicons
folder, convert filestouch.svg
,32.svg
(and optionaly16.svg
) to:-
favicon.ico
in size32×32
(and optionaly with second layer in size16×16
) -
icon.svg
— optimized version of32.svg
(ortouch.svg
if32.svg
and16.svg
are missing) -
icon-180.png
in size180×180
for old iPhones -
icon-192.png
andicon-192.webp
in size192×192
-
icon-512.png
andicon-512.webp
in size512×512
-
manifest.webmanifest
with thename
anddescription
fields from yourpackage.json
and theicons
field for the192
and512
files -
Links.md
— advice on code of links for generated files, moving files, and fixing paths to files.
conjure favicons -i assets/favicons
Move the resulting
favicon.ico
andmanifest.webmanifest
to the project directory, from where they will be moved to the root of the server. The default paths inmanifest.webmanifest
are formed with the expectation that themanifest.webmanifest
file will be moved to the root of the project source (which corresponds tosrc/
by default). In any case, double-check these paths to make sure they match the file structure of your project.- The most optimal composition of source files is a couple of files:
-
32.svg
— the drawing is adjusted to a32×32
pixel grid, may transparent areas such as rounded corners of the background; -
touch.svg
— the drawing is prepared for large touch icons with solid background without rounding, with margins much larger than32.svg
.
-
- If you don't have a variant specially prepared by the designer for the pixel grid size
16×16
, then don't create a file16.svg
from variants of other sizes — it will only increase the weight of the finalfavicon.ico
. - If you don't have a
32×32
variant, but you have a16×16
variant, there is no need to make a32.svg
file,conjure
will make all the variants for you. - If you have only one variant and it's not
16×16
, it doesn't matter what you name the file,32.svg
ortouch.svg
(as long as it's not16.svg
) — a file with either of these two names will be used byconjure
to generate the entire set of favicons.
-
-
Run all three special commands with default settings, but deleting the original raster images, i.e.:
- run
conjure images
in therc/shared/images
folder with deleting the original raster images, - run
conjure icons
in the ``src/shared/icons` folder, - run
conjure favicons
in the ``src/shared/favicons` folder,
conjure all -r
- run
This project is licensed under the MIT License — see the LICENSE.md file for details.