New Comment

Posted by Jess on 4th June 2020 at 10:28:18 UTC

Thank you for the kind words, Stas. I’m really sorry you ran into trouble following the post! I don’t mention it explicitly but you actually have to add the file loader to config/environment.js. Apologies for leaving that out - what you're describing is an issue I ran into myself so I'm not sure how I forgot. Though the file-loader package is included as a Webpacker dependency, you have to add it to your configuration like so in order to import inline SVGs:

const { environment } = require('@rails/webpacker')

const fileLoader = environment.loaders.get('file')
fileLoader.exclude = /node_modules[\\/]quill/
const svgLoader = {
 test: /\.svg$/,
 loader: 'svg-inline-loader'

The key line here is where the fileLoader constant is defined. The file loader will allow you to resolve the paths that you can see in your screenshot into URLs for the relevant SVG files. Excluding the node_modules/quill folder as is done in the following line is also needed to get the icons to display correctly.

I hope that helps and apologies for not mentioning this earlier. I'll try to update the post when I have a bit more time but do let me know if you run into any issues in the meantime.

Anonymous(Log InSign Up)