Plugin path in index.js file

[ldecoker]

Hello!

Is there a way to get the plugin path in index.js? I would like to add an svg file in the edit and save section but for that I would need to get the plugin path (like plugin_dir_url(__FILE__)).

thx in advance!

[Zac Gordon]

Great question.

To give some context to how things are done in the React world of WordPress going forward, you would want to import your SVG images directly into your JS code (like we do with the SVG icons in the examples).

This article goes into more depth on the topic: https://medium.com/@kossnocorp/solving-the-unsolvable-svg-icons-with-react-preact-webpack-4185032f2601

But the short answer is, that is not the way you want to approach this problem. You want to add the SVG file to your plugin folder architecture then import the SVG file using a relative file path and JavaScript imports. This will also require an appropriate webpack loader for SVG files.

Hope that helps you get moving in the right direction!

[ldecoker]

Thx Zac.

Hereunder what I have done to solve my issue (not sure this is the best solution but it works):

npm i react-svg-core --save-dev
npm i react-svg-loader --save-dev

Then in webpack.config.js (in module.exports):

externals: {
		react: {
			root: 'React',
			commonjs: 'react',
			commonjs2: 'react',
			amd: 'react'
		}
	},

and in rules:

{
				test: /\.svg$/,
				use: [
					{
						loader: "babel-loader"
					},
					{
						loader: "react-svg-loader",
						options: {
							jsx: true // true outputs JSX tags
						}
					}
				]
			}

Finally in index.js :
import ArrowBottom from '../../assets/images/arrow-bottom.svg';

and where you want to add your icon:
<ArrowBottom />

Do not hesitate to comment 🙂

Have a nice day!

[Author]

Posts