Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-03-26T12:42:38.047Z
Answers.LastActivityDate: 2024-03-26T12:42:38.047Z
Answers.UserDisplayName: Matthias
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-03-25T11:08:44.577Z
Answers.LastActivityDate: 2024-03-25T11:08:44.577Z
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Body: <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>
  
Tags: <plugin-development>
Title: Reference SVG file in CSS of custom plugin
ThreadText: # 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:
  
  ```php
  $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](https://craftcms.com/docs/4.x/extend/asset-bundles.html#getting-published-file-urls) for more info!
  
  
  ---
  
  