diff --git a/.changeset/spotty-hornets-unite.md b/.changeset/spotty-hornets-unite.md new file mode 100644 index 00000000000..9cf08b3d79f --- /dev/null +++ b/.changeset/spotty-hornets-unite.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris-icons': minor +--- + +Added optimize script diff --git a/polaris-icons/package.json b/polaris-icons/package.json index 88266b28c74..3a3edda2e00 100644 --- a/polaris-icons/package.json +++ b/polaris-icons/package.json @@ -18,9 +18,10 @@ }, "scripts": { "build": "rollup -c", + "clean": "rm -rf .turbo node_modules dist", "dev": "rollup -c -w", - "test": "jest", - "clean": "rm -rf .turbo node_modules dist" + "optimize": "yarn svgo -f icons", + "test": "jest" }, "exports": { ".": { diff --git a/polaris-icons/rollup.config.mjs b/polaris-icons/rollup.config.mjs index 9448e91b439..eca14b86e2b 100644 --- a/polaris-icons/rollup.config.mjs +++ b/polaris-icons/rollup.config.mjs @@ -9,6 +9,7 @@ import globby from 'globby'; import jsYaml from 'js-yaml'; import svgr from '@svgr/core'; import {optimize} from 'svgo'; +import svgoConfig from './svgo.config.js'; const convert = svgr.default; const iconBasePath = new URL('./icons', import.meta.url).pathname; @@ -101,48 +102,6 @@ function svgBuild(options = {}) { const filter = createFilter(options.include || '**/*.svg', options.exclude); /** @type {import('svgo').OptimizeOptions} */ - const svgoConfig = { - plugins: [ - { - name: 'preset-default', - params: { - overrides: { - /** - * viewBox is needed in order to produce 20px by 20px containers - * with smaller (minor) icons inside. - */ - removeViewBox: false, - - /** - * The following 2 settings are disabled to reduce rendering inconsistency - * on Android. Android uses a subset of the SVG spec called SVG Tiny: - * https://developer.android.com/studio/write/vector-asset-studio#svg-support - */ - - /** - * Merging mutliple detached paths into a single path can lead to - * rendering issues on some platforms where detatched paths are joined - * by hairlines. Not merging paths results in greater compatibility - * with minimal additional overhead. - */ - mergePaths: false, - - convertPathData: { - /** - * Mixing absolute and relative path commands can lead to rendering - * issues on some platforms. This disables converting some path data to - * absolute if it is shorter, keeping all path data relative. Using - * relative paths means that data points are relative to the current - * point at the start of the path command, which does not greatly - * increase the quantity of path data. - */ - utilizeAbsolute: false, - }, - }, - }, - }, - ], - }; svgoConfig.plugins.push({ ...replaceFillAttributeSvgoPlugin(), diff --git a/polaris-icons/svgo.config.js b/polaris-icons/svgo.config.js new file mode 100644 index 00000000000..12726de1237 --- /dev/null +++ b/polaris-icons/svgo.config.js @@ -0,0 +1,42 @@ +module.exports = { + plugins: [ + { + name: 'preset-default', + params: { + overrides: { + /** + * viewBox is needed in order to produce 20px by 20px containers + * with smaller (minor) icons inside. + */ + removeViewBox: false, + + /** + * The following 2 settings are disabled to reduce rendering inconsistency + * on Android. Android uses a subset of the SVG spec called SVG Tiny: + * https://developer.android.com/studio/write/vector-asset-studio#svg-support + */ + + /** + * Merging mutliple detached paths into a single path can lead to + * rendering issues on some platforms where detatched paths are joined + * by hairlines. Not merging paths results in greater compatibility + * with minimal additional overhead. + */ + mergePaths: false, + + convertPathData: { + /** + * Mixing absolute and relative path commands can lead to rendering + * issues on some platforms. This disables converting some path data to + * absolute if it is shorter, keeping all path data relative. Using + * relative paths means that data points are relative to the current + * point at the start of the path command, which does not greatly + * increase the quantity of path data. + */ + utilizeAbsolute: false, + }, + }, + }, + }, + ], +};