How to use @shopify/images - 6 common examples
To help you get started, we’ve selected a few @shopify/images examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
Shopify / polaris-react / scripts / optimize.js View on Github 
/* eslint-disable no-console */
const {resolve: resolvePath, basename, dirname} = require('path');
const SVGO = require('svgo');
const glob = require('glob');
const {paramCase} = require('change-case');
const {readFileSync, writeFileSync, removeSync} = require('fs-extra');
const {svgOptions} = require('@shopify/images/optimize');
const svgo = new SVGO(svgOptions());
glob(resolvePath(__dirname, '../src/**/*.svg'), (error, files) => {
if (error) {
console.error(error);
process.exit(1);
return;
}
files.forEach((file) => optimizeFile(file));
});
function optimizeFile(file) {
return new Promise((resolve) => {
const data = readFileSync(file, 'utf8');
svgo.optimize(data, (result) => {
removeSync(file);{
test(resource) {
return (
(INTERNAL_ICON_PATH_REGEX.test(resource) ||
PACKAGE_ICON_PATH_REGEX.test(resource)) &&
resource.endsWith('.svg')
);
},
use: [
{
loader: '@shopify/images/icon-loader',
},
{
loader: 'image-webpack-loader',
options: {
svgo: svgOptimizationOptions(),
},
},
],
},
{
test(resource) {
return (
IMAGE_PATH_REGEX.test(resource) &&
!(
INTERNAL_ICON_PATH_REGEX.test(resource) ||
PACKAGE_ICON_PATH_REGEX.test(resource)
)
);
},
use: [
{},
},
],
},
{
test(resource) {
return ICON_PATH_REGEX.test(resource) && resource.endsWith('.svg');
},
use: [
{
loader: '@shopify/images/icon-loader',
},
{
loader: 'image-webpack-loader',
options: {
svgo: svgOptimizationOptions(),
},
},
],
},
{
test(resource) {
return (
IMAGE_PATH_REGEX.test(resource) && !ICON_PATH_REGEX.test(resource)
);
},
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
emitFile: true,}),
],
module: {
loaders: [
{
test(resource) {
return ICON_PATH_REGEX.test(resource) && resource.endsWith('.svg');
},
use: [
{
loader: '@shopify/images/icon-loader',
},
{
loader: 'image-webpack-loader',
options: {
svgo: svgOptimizationOptions(),
},
},
],
},
{
test(resource) {
return (
IMAGE_PATH_REGEX.test(resource) && !ICON_PATH_REGEX.test(resource)
);
},
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
emitFile: true,}),
],
module: {
loaders: [
{
test(resource) {
return ICON_PATH_REGEX.test(resource) && resource.endsWith('.svg');
},
use: [
{
loader: '@shopify/images/icon-loader',
},
{
loader: 'image-webpack-loader',
options: {
svgo: svgOptimizationOptions(),
},
},
],
},
{
test(resource) {
return (
IMAGE_PATH_REGEX.test(resource) && !ICON_PATH_REGEX.test(resource)
);
},
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
},const {extname} = require('path');
const {createFilter} = require('rollup-pluginutils');
const SVGO = require('svgo');
const {svgOptions} = require('@shopify/images/optimize');
const VIEWBOX_REGEX = /viewBox="([^"]*)"/;
const SVG_REGEX = /(]*>|<\/svg>)/g;
const FILL_REGEX = /fill="[^"]*"/g;
const svgo = new SVGO(svgOptions());
module.exports = function icon(options = {}) {
const filter = createFilter(options.include, options.exclude);
return {
name: 'shopify-icon',
transform(source, id) {
if (extname(id) !== '.svg') {
return null;
}
if (!filter(id)) {
return null;
}
return new Promise((resolve) => {@shopify/images
Packages to help us wrangle images at Shopify.
