svg-sprite-loader - Webpack loader for creating SVG sprites.

  •        116

Webpack loader for creating SVG sprites. 🎉 2.0 is out, please read the migration guide & overview.

https://github.com/kisenka/svg-sprite-loader#readme

Dependencies:

bluebird : ^3.5.0
deepmerge : 1.3.2
domready : 1.0.8
escape-string-regexp : 1.0.5
loader-utils : ^1.1.0
svg-baker : ^1.2.17
svg-baker-runtime : ^1.3.3
url-slug : 2.0.0

Tags
Implementation
License
Platform

   




Related Projects

svg-react-loader - Webpack SVG to React Component Loader

  •    Javascript

A webpack loader allowing for inline usage of a SVG as a React component, or for composing individual SVGs into larger ones. The latest version has been refactored to allow for receiving an SVG/XML string or an JSON object-tree representing an SVG. This allows for other loaders before svg-react to alter/update/remove nodes before reaching svg-react.

gulp-svg-sprite - SVG sprites & stacks galore — Gulp plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours

  •    Javascript

This document covers only gulp specific installation and configuration aspects. For a full list of features and options, please see the svg-sprite manual. NOTICE: By default, svg-sprite doesn't send any files downstream unless you configure it. There are tons of options available — please see below for some basic examples. Also, you should possibly take care of errors that might occur.

svg-inline-loader - Inline SVG loader with cleaning-up functionality

  •    Javascript

This Webpack loader inlines SVG as module. If you use Adobe suite or Sketch to export SVGs, you will get auto-generated, unneeded crusts. This loader removes it for you, too. Simply add configuration object to module.loaders like this.


svg-icon-system-boilerplate - A boilerplate for building a custom icon system via a linked external SVG sprite

  •    HTML

A boilerplate for building a custom icon system via a linked external SVG sprite. Configuration Options -- this system is based on SVG-sprite. sprite.svg is the main file containing a sprite of each SVG included using <symbol> inside of SVG <defs>. This system implements SVG icons via to access individual icons.

svg-sprite - SVG sprites & stacks galore — A low-level Node

  •    Javascript

It comes with a set of Mustache templates for creating stylesheets in good ol' CSS or one of the major pre-processor formats (Sass, Less and Stylus). Tweaking the templates or even adding your own custom output format is really easy, just as switching on the generation of an HTML example document along with your sprite. For an up-to-date list of browsers supporting SVG in general respectively SVG fragment identifiers in particular (required for <defs> and <symbol> sprites as well as SVG stacks) please refer to caniuse.com.

sprite.sh - A Bash script to build a SVG sprite from a folder of SVG files (typically icons).

  •    Javascript

A Node.js script to build a SVG sprite from a folder of SVG files (typically icons). Or you know, you can also just copy the script.

open-iconic - An open source icon set with 223 marks in SVG, webfont and raster formats

  •    CSS

We like SVGs and we think they're the way to display icons on the web. Since Open Iconic are just basic SVGs, we suggest you display them like you would any other image (don't forget the alt attribute). Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack.

webpack-book - From apprentice to master (CC BY-NC-ND)

  •    Javascript

IMPORTANT! If you want to support the development of this book, you can purchase a copy at Leanpub. A part (~30%) of the proceedings will go directly to the author of webpack to support its development. Webpack, a module bundler, solves a significant problem for web developers. It can be daunting to learn but once you grok it, life gets easier. The purpose of this book is to make it easier to pick up the tool while learning more advanced techniques as well. You can read the book online.

bootstrap-loader - Load Bootstrap styles and scripts in your Webpack bundle

  •    Javascript

If your team might need my help, please email me for a free half-hour project consultation, on anything from React on Rails to any aspect of web or mobile application development for both consumer and enterprise products. Intersted in optimizing your webpack setup for React on Rails including code splitting with react-router v4, webpack v4, and react-loadable? Contact me.

gulp-svgstore - Combine svg files into one with symbol elements

  •    Javascript

Combine svg files into one with <symbol> elements. Read more about this in CSS Tricks article. If you need similar plugin for grunt, I encourage you to check grunt-svgstore.

js-code-to-svg-flowchart - js2flowchart - a visualization library to convert any JavaScript code into beautiful SVG flowchart

  •    Javascript

Why? While I've been working on Under-the-hood-ReactJS I spent enormous amount of time on creating schemes. Each change in code or flowchart affects all entire scheme instantly, forcing you to move and align 'broken pieces'. Just repeated manual work... Imagine a library which takes any JS code and generate SVG flowchart from it, works on client and server. Allows you easily adjust styles scheme for your context or demonstrate your code logic from different abstractions levels. Highlighting, destructing whole blocks, custom modifiers for your needs etc.

ts-loader - TypeScript loader for webpack

  •    Javascript

This is the typescript loader for webpack. We have a number of example setups to accomodate different workflows. From "vanilla" ts-loader, to using ts-loader in combination with babel for transpilation, happypack or thread-loader for faster builds and fork-ts-checker-webpack-plugin for performing type checking in a separate process. Not forgetting Hot Module Replacement. Our examples can be found here.

workerize-loader - 🏗️ Automatically move a module into a Web Worker (Webpack loader)

  •    Javascript

A webpack loader that moves a module and its dependencies into a Web Worker, automatically reflecting exported functions as asynchronous proxies.

webpack.js.org - New repository for webpack documentation and more!

  •    Javascript

Guides, documentation, and all things webpack.We haven't created issues for the other sections yet, but they will be coming soon. For dev-related work please see General - Current Longterm Plan, which will soon be replaced by a more dev-specific issue.

sass-loader - Compiles Sass to CSS

  •    HTML

Loads a Sass/SCSS file and compiles it to CSS. Use the css-loader or the raw-loader to turn it into a JS module and the mini-css-extract-plugin to extract it into a separate file. Looking for the webpack 1 loader? Check out the archive/webpack-1 branch.

babel-plugin-webpack-loaders - babel 6 plugin which allows to use webpack loaders

  •    Javascript

Since plugin was published, there were a lot of changes in testing software. Be sure in most(all) cases you DON'T need this plugin for testing. I highly recommend you to use jest for testing, and use moduleNameMapper (identity-obj-proxy, etc) to mock CSS-Modules and other webpack loaders. This Babel 6 plugin allows you to use webpack loaders in Babel. It's now easy to run universal apps on the server without additional build steps, to create libraries as usual with babel src --out-dir lib command, to run tests without mocking-prebuilding source code. It just replaces require - import statements with webpack loaders results. Take a look at this Babel build output diff to get the idea.

stylelint-webpack-plugin - A webpack plugin to lint your CSS/Sass code using stylelint

  •    Javascript

This module requires a minimum of Node v6.9.0 and webpack v4.0.0. Both stylelint-loader and this module have their uses. stylelint-loader lints the files you require (or the ones you define as an entry in your webpack config). However, @imports in files are not followed, meaning only the main file for each require/entry is linted.