Skip to content

Commit

Permalink
Updated saturation and opacity of custom icon files
Browse files Browse the repository at this point in the history
  • Loading branch information
@PKief
PKief committed Sep 6, 2020
1 parent 5be67ba commit 2ce832d
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 54 deletions.
61 changes: 39 additions & 22 deletions src/icons/generator/iconOpacity.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import * as fs from 'fs';
import * as path from 'path';
import { getCustomIconPaths } from '../../helpers/customIcons';
import { IconJsonOptions } from '../../models';

/**
* Changes the opacity of all icons in the set.
* @param opacity Opacity value
* @param options Icon JSON options which include the opacity value.
* @param fileNames Only change the opacity of certain file names.
*/
export const setIconOpacity = (opacity: number, fileNames?: string[]) => {
if (!validateOpacityValue(opacity)) {
export const setIconOpacity = (options: IconJsonOptions, fileNames?: string[]) => {
if (!validateOpacityValue(options.opacity)) {
return console.error('Invalid opacity value! Opacity must be a decimal number between 0 and 1!');
}

Expand All @@ -19,28 +21,16 @@ export const setIconOpacity = (opacity: number, fileNames?: string[]) => {
iconsPath = path.join(__dirname, '..', '..', '..', 'icons');
}

const customIconPaths = getCustomIconPaths(options);
const iconFiles = fs.readdirSync(iconsPath);

try {
// read all icon files from the icons folder
(fileNames || fs.readdirSync(iconsPath)).forEach(iconFileName => {
const svgFilePath = path.join(iconsPath, iconFileName);

// Read SVG file
const svg = fs.readFileSync(svgFilePath, 'utf-8');

// Get the root element of the SVG file
const svgRootElement = getSVGRootElement(svg);
if (!svgRootElement) return;
(fileNames || iconFiles).forEach(adjustOpacity(iconsPath, options));

let updatedRootElement: string;

if (opacity < 1) {
updatedRootElement = addOpacityAttribute(svgRootElement, opacity);
} else {
updatedRootElement = removeOpacityAttribute(svgRootElement);
}
const updatedSVG = svg.replace(/<svg[^>]*>/, updatedRootElement);

fs.writeFileSync(svgFilePath, updatedSVG);
customIconPaths.forEach(iconPath => {
const customIcons = fs.readdirSync(iconPath);
customIcons.forEach(adjustOpacity(iconPath, options));
});
} catch (error) {
console.error(error);
Expand Down Expand Up @@ -87,3 +77,30 @@ const removeOpacityAttribute = (svgRoot: string) => {
const pattern = new RegExp(/\sopacity="[\d.]+"/);
return svgRoot.replace(pattern, '');
};

const adjustOpacity = (iconPath: string, options: IconJsonOptions): (value: string, index: number, array: string[]) => void => {
return iconFileName => {
const svgFilePath = path.join(iconPath, iconFileName);

// Read SVG file
const svg = fs.readFileSync(svgFilePath, 'utf-8');

// Get the root element of the SVG file
const svgRootElement = getSVGRootElement(svg);
if (!svgRootElement)
return;

let updatedRootElement: string;

if (options.opacity < 1) {
updatedRootElement = addOpacityAttribute(svgRootElement, options.opacity);
}
else {
updatedRootElement = removeOpacityAttribute(svgRootElement);
}
const updatedSVG = svg.replace(/<svg[^>]*>/, updatedRootElement);

fs.writeFileSync(svgFilePath, updatedSVG);
};
};

75 changes: 46 additions & 29 deletions src/icons/generator/iconSaturation.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import * as fs from 'fs';
import * as path from 'path';
import { getCustomIconPaths } from '../../helpers/customIcons';
import { IconJsonOptions } from '../../models';

/**
* Changes saturation of all icons in the set.
* @param saturation Saturation value.
* @param options Icon JSON options which include the saturation value.
* @param fileNames Only change the saturation of certain file names.
*/
export const setIconSaturation = (saturation: number, fileNames?: string[]) => {
if (!validateSaturationValue(saturation)) {
export const setIconSaturation = (options: IconJsonOptions, fileNames?: string[]) => {
if (!validateSaturationValue(options.saturation)) {
return console.error('Invalid saturation value! Saturation must be a decimal number between 0 and 1!');
}

Expand All @@ -19,35 +21,16 @@ export const setIconSaturation = (saturation: number, fileNames?: string[]) => {
iconsPath = path.join(__dirname, '..', '..', '..', 'icons');
}

const customIconPaths = getCustomIconPaths(options);
const iconFiles = fs.readdirSync(iconsPath);

// read all icon files from the icons folder
try {
(fileNames || fs.readdirSync(iconsPath)).forEach(iconFileName => {
const svgFilePath = path.join(iconsPath, iconFileName);

// Read SVG file
const svg = fs.readFileSync(svgFilePath, 'utf-8');

// Get the root element of the SVG file
const svgRootElement = getSVGRootElement(svg);
if (!svgRootElement) return;

let updatedRootElement: string;
(fileNames || iconFiles).forEach(adjustSaturation(iconsPath, options));

if (saturation < 1) {
updatedRootElement = addFilterAttribute(svgRootElement);
} else {
updatedRootElement = removeFilterAttribute(svgRootElement);
}

let updatedSVG = svg.replace(/<svg[^>]*>/, updatedRootElement);

if (saturation < 1) {
updatedSVG = addFilterElement(updatedSVG, saturation);
} else {
updatedSVG = removeFilterElement(updatedSVG);
}

fs.writeFileSync(svgFilePath, updatedSVG);
customIconPaths.forEach(iconPath => {
const customIcons = fs.readdirSync(iconPath);
customIcons.forEach(adjustSaturation(iconPath, options));
});
} catch (error) {
console.error(error);
Expand Down Expand Up @@ -116,3 +99,37 @@ const removeFilterElement = (svg: string) => {
export const validateSaturationValue = (saturation: number) => {
return saturation !== undefined && saturation <= 1 && saturation >= 0;
};

const adjustSaturation = (iconsPath: any, options: IconJsonOptions): (value: string, index: number, array: string[]) => void => {
return iconFileName => {
const svgFilePath = path.join(iconsPath, iconFileName);

// Read SVG file
const svg = fs.readFileSync(svgFilePath, 'utf-8');

// Get the root element of the SVG file
const svgRootElement = getSVGRootElement(svg);
if (!svgRootElement)
return;

let updatedRootElement: string;

if (options.saturation < 1) {
updatedRootElement = addFilterAttribute(svgRootElement);
}
else {
updatedRootElement = removeFilterAttribute(svgRootElement);
}

let updatedSVG = svg.replace(/<svg[^>]*>/, updatedRootElement);

if (options.saturation < 1) {
updatedSVG = addFilterElement(updatedSVG, options.saturation);
}
else {
updatedSVG = removeFilterElement(updatedSVG);
}

fs.writeFileSync(svgFilePath, updatedSVG);
};
};
6 changes: 3 additions & 3 deletions src/icons/generator/jsonGenerator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,13 @@ export const createIconFile = (updatedConfigs?: IconJsonOptions, updatedJSONConf
// if updatedConfigs do not exist (because of initial setup)
// or new config value was detected by the change detection
generateFolderIcons(options.folders.color);
setIconOpacity(options.opacity, ['folder.svg', 'folder-open.svg', 'folder-root.svg', 'folder-root-open.svg']);
setIconOpacity(options, ['folder.svg', 'folder-open.svg', 'folder-root.svg', 'folder-root-open.svg']);
}
if (!updatedConfigs || updatedConfigs.opacity !== undefined) {
setIconOpacity(options.opacity);
setIconOpacity(options);
}
if (!updatedConfigs || updatedConfigs.saturation !== undefined) {
setIconSaturation(options.saturation);
setIconSaturation(options);
}
renameIconFiles(iconJsonPath, options);
} catch (error) {
Expand Down

0 comments on commit 2ce832d

Please sign in to comment.