PostCSS SVG runs in all Node environments, with special instructions for:
Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt |
---|
Add PostCSS SVG to your project:
npm install postcss-svg --save-dev
Use PostCSS SVG to process your CSS:
const postcssSVG = require('postcss-svg');
postcssSVG.process(YOUR_CSS /*, processOptions, pluginOptions */);
Or use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssSVG = require('postcss-svg');
postcss([
postcssSVG(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
Add PostCSS CLI to your project:
npm install postcss-cli --save-dev
Use PostCSS SVG in your postcss.config.js
configuration file:
const postcssSVG = require('postcss-svg');
module.exports = {
plugins: [
postcssSVG(/* pluginOptions */)
]
}
Add PostCSS Loader to your project:
npm install postcss-loader --save-dev
Use PostCSS SVG in your Webpack configuration:
const postcssSVG = require('postcss-svg');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
{ loader: 'postcss-loader', options: {
ident: 'postcss',
plugins: () => [
postcssSVG(/* pluginOptions */)
]
} }
]
}
]
}
}
Add React App Rewired and React App Rewire PostCSS to your project:
npm install react-app-rewired react-app-rewire-postcss --save-dev
Use React App Rewire PostCSS and PostCSS SVG in your
config-overrides.js
file:
const reactAppRewirePostcss = require('react-app-rewire-postcss');
const postcssSVG = require('postcss-svg');
module.exports = config => reactAppRewirePostcss(config, {
plugins: () => [
postcssSVG(/* pluginOptions */)
]
});
Add Gulp PostCSS to your project:
npm install gulp-postcss --save-dev
Use PostCSS SVG in your Gulpfile:
const postcss = require('gulp-postcss');
const postcssSVG = require('postcss-svg');
gulp.task('css', () => gulp.src('./src/*.css').pipe(
postcss([
postcssSVG(/* pluginOptions */)
])
).pipe(
gulp.dest('.')
));
Add Grunt PostCSS to your project:
npm install grunt-postcss --save-dev
Use PostCSS SVG in your Gruntfile:
const postcssSVG = require('postcss-svg');
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
postcssSVG(/* pluginOptions */)
]
},
dist: {
src: '*.css'
}
}
});