JavaScript for WordPress Forums Gutenberg Development Plugin path in index.js file

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #60643


    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:

    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!


    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!

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.