nl_tokens: Applies SVGO on the SVG file in order to optimize its contents and remove unnecessary attributes for the sprite . Adds the SVG to the given sprite which will then be processed by the plugin . Generates SVG metadata to be passed to JavaScript and CSS files so that the symbols can be rendered .
pl_tokens: function loader ( <mask> ) { const { addDependency , resource , resourcePath } = this ; // Get callback because the SVG is going to be optimized and that is an async operation const callback = this . async ( ) ; // Parse the loader query and apply the default values in case no values are provided const { iconName , publicPath , sprite , svgoOptions } = Object . assign ( { } , DEFAULT_LOADER_OPTIONS , loaderUtils . getOptions ( this ) ) ; // Add the icon as a dependency addDependency ( resourcePath ) ; // Start optimizing the SVG file imagemin . buffer ( content , { plugins : [ imageminSvgo ( svgoOptions ) , ] , } ) . then ( ( content ) => { // Create the icon name with the hash of the optimized content const name = loaderUtils . interpolateName ( this , iconName , { content } ) ; // Register the icon using its resource path with query as id // so that tools like: `svg-transform-loader` can be used in combination with this loader. const icon = sprite . addIcon ( resource , name , content . toString ( ) ) ; // Export the icon as a metadata object that contains urls to be used on an <img/> in HTML or url() in CSS // If the outputted file is not hashed and to support hot module reload, we must force the browser // to re-download the sprite on subsequent compilations // We do this by adding a cache busting on the URL, with the following pattern: img/sprite.svg?icon-abcd#icon-abcd // It's important that the cache busting is not included initially so that it plays well with server-side rendering, // otherwise many view libraries will complain about mismatches during rehydration (such as React) const hasSamePath = sprite . originalResourcePath === sprite . resourcePath ; setImmediate ( ( ) => { callback ( null , ` ${ publicPath ? ` ${ publicPath } ` : '__webpack_public_path__' } ${ icon . getUrlToSymbol ( ) } ${ icon . getUrlToView ( ) } ${ process . env . NODE_ENV !== 'production' && hasSamePath ? ` ${ icon . getUrlToSymbol ( true ) } ${ icon . getUrlToView ( true ) } ` : '' } ${ icon . getDocument ( ) . getViewBox ( ) } ${ icon . getDocument ( ) . getTitle ( ) } ` ) ; } ) ; } ) . catch ( ( err ) => { setImmediate ( ( ) => callback ( err ) ) ; } ) ; }