<p>I managed to get it working thanks to the awesome Craft CMS support.</p>
<p>As explained in the question I already had my CSS and JS files registered and working in the plugin.
The assetbundle's sourcePath is <code>@vendor/plugin_handle/resources/dist/</code>
So I had to move my SVG inside the dist folder.</p>
<p>Then in the css file I just had to adjust the path to the SVG relative to the css file. In my case it was <code>../img/icon.svg</code></p>

CC BY-SA 4.0
2024-03-26T12:42:38.047Z
2024-03-26T12:42:38.047Z
Matthias
<p>For assets (images, CSS, JS) stored in your plugin's source folder, you'll need a <em>published file URL</em> to use them in front-end or control panel templates.</p>
<p>Essentially, in &quot;publishing&quot; a file, Craft will copy it to the <code>cpresources</code> folder under your web root - meaning that it's eventual URL will be something like <code>https://foo.ddev.site/cpresources/1sdfasz/icon.svg</code>.</p>
<p>Assuming your icon lives in a <code>resources</code> folder inside your plugin, here's how to do it in PHP and Twig, respectively:</p>
<pre class="lang-php prettyprint-override"><code>$url = \Craft::$app-&gt;assetManager-&gt;getPublishedUrl(
    '@vendor/plugin/resources/icon.svg',
    true
);
</code></pre>
<pre><code>{% set iconUrl = craft.app.assetManager.getPublishedUrl('@vendor/plugin/resources/icon.svg', true) %}
</code></pre>
<p>Note that the <code>'@vendor/plugin'</code> part should be replaced with your plugin's <em>auto-generated</em> Yii alias.</p>
<p>See <a href="https://craftcms.com/docs/4.x/extend/asset-bundles.html#getting-published-file-urls" rel="nofollow noreferrer">the official docs</a> for more info!</p>

CC BY-SA 4.0
2024-03-25T11:08:44.577Z
2024-03-25T11:08:44.577Z
Mats Mikkel Rummelhoff
<p>I have built a custom plugin and have a css file that is being injected as an assetbundle.
This works great but when I want to set a background image (SVG in this case) I'm not sure what the path should be.
I would like to store the SVG inside the plugin folder and not in the main project.
Should I store the SVG in the resources folder or create a web folder like some other plugins seem to do?</p>

<plugin-development>
Reference SVG file in CSS of custom plugin
# Reference SVG file in CSS of custom plugin

(Asked by: username_0 on 2024-03-20)

I have built a custom plugin and have a css file that is being injected as an assetbundle.
This works great but when I want to set a background image (SVG in this case) I'm not sure what the path should be.
I would like to store the SVG inside the plugin folder and not in the main project.
Should I store the SVG in the resources folder or create a web folder like some other plugins seem to do?

**Tags:** plugin-development

---

## 2 answers

### Answer by username_0 on 2024-03-26. Score: 0 | Accepted answer

I managed to get it working thanks to the awesome Craft CMS support.

As explained in the question I already had my CSS and JS files registered and working in the plugin.
The assetbundle's sourcePath is `@vendor/plugin_handle/resources/dist/`
So I had to move my SVG inside the dist folder.

Then in the css file I just had to adjust the path to the SVG relative to the css file. In my case it was `../img/icon.svg`


---

### Answer by username_1 on 2024-03-25. Score: 0

For assets (images, CSS, JS) stored in your plugin's source folder, you'll need a published file URL to use them in front-end or control panel templates.
Essentially, in "publishing" a file, Craft will copy it to the cpresources folder under your web root - meaning that it's eventual URL will be something like https://foo.ddev.site/cpresources/1sdfasz/icon.svg.
Assuming your icon lives in a resources folder inside your plugin, here's how to do it in PHP and Twig, respectively:
$url = \Craft::$app->assetManager->getPublishedUrl(
    '@vendor/plugin/resources/icon.svg',
    true
);

{% set iconUrl = craft.app.assetManager.getPublishedUrl('@vendor/plugin/resources/icon.svg', true) %}

Note that the '@vendor/plugin' part should be replaced with your plugin's auto-generated Yii alias.
See the official docs for more info!


---

