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.

github Shopify / polaris-react / scripts / optimize.js View on Github external
/* 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);
github Shopify / polaris-react / playground / webpack.config.js View on Github external
{
        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: [
          {
github Shopify / polaris-react / webpack.uxpin.config.js View on Github external
},
          },
        ],
      },
      {
        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,
github Shopify / polaris-react / shrink-ray-build / webpack.config.js View on Github external
}),
  ],
  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,
github Shopify / polaris-react / tophat / webpack.config.js View on Github external
}),
  ],
  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,
            },
github Shopify / polaris-react / config / rollup / plugins / icon.js View on Github external
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.

MIT
Latest version published 3 years ago

Package Health Score

67 / 100
Full package analysis

Popular @shopify/images functions

Similar packages