I've got an Astro project using markdown content collections for blog posts. In these posts I have svg images referenced as so:
This shows the SVG inside of an <img> tag but I want to inline the SVG in these scenarios. This is where the rehype-inline-svg plugin is supposed to help me. But when I add the plugin into my Astro config, I get an error ENOENT: no such file or directory, open '/assets/images/image-1.svg'
I have tried several paths to reference this image, but none work. I figure at the very least, the path should stay the same. I am not sure what else to do to get this to work. My Astro config is as follows:
import { defineConfig } from 'astro/config';
import inlineSVG from '#jsdevtools/rehype-inline-svg';
export default defineConfig({
markdown: {
rehypePlugins: [inlineSVG]
},
});
My original goal was to display Excalidraw SVGs with the font. Fonts need to be embedded if contained within an <img> tag so I am trying this inline approach. I would be happy to know if you have a good automated technique for achieving this too.
In your case, is /assets/images/image-1.svg in your public/ directory? Looking at rehype-inline-svg’s code it looks like it tries to resolve SVG paths relative to the root of the project, so you might need to include public/ in your Markdown somewhat unusually:
Related
Colleagues, I'm trying Parcel as an alternative to webpack project builder and I like it, but there are two BUTs that I still can't beat (here are links to starting builds - build on Parcel
and build on webpack):
1) In the assembly under the webpack, I used svg-sprite-loader to create svg sprites, which adds immediately after opening body svg with symbols like this:
there is no such plugin in the parcel assembly, I tried to install parcel-plugin-svg-sprite, but it does not compile a separate sprite (at least I did not find such a solution in the documentation).
As a result, for now, I am inserting svg in the way described in the parcel documentation (I use a pug in the project):
svg
use (href = "../../ icons / facebook.svg")
but in this case, I only get an empty space ((
2) When building a project, i get one folder with a lot of files, which is not very convenient, in the documentation I found that i can use the -d flag to set a name for the folder in which building the project, but did not find how to separate html/css/js/imgs by folders.
Thanks in advance for any help.
I don't think that there is yet a plugin for parcel2 that will allow you to easily create svg sprites. The parcel-plugin-svg-sprite package you mentioned is for parcel 1, so it is not expected to work. (In general, you can expect parcel 2 plugins to conform to this naming scheme - packages that start with parcel-plugin are probably for parcel 1).
As a workaround, the easiest way to use svgs in a pug template built with parcel would be to use an <img> or an <object> tag with a src property, e.g:
img(src="../../icons/facebook.svg")
or
object(data="../../icons/facebook.svg")
Doing it this way, where the svg file is "external" has a few limitations(discussed in the docs), notably there will be an extra round trip to download each svg (this would be good for caching, but bad if there were hundreds of svgs on your site). Also, you can't style the svg with css from the surrounding document.
You can avoid the first limitation (extra server round trip) by using css background-image/background property with a data URL (see docs)
.pug file
.icon-test
.(s)css file
.icon-test {
background-image: url('data-url:../../icons/facebook.svg');
}
(In react-based projects there is a way to avoid both these limitations and get parcel to inject the SVG as inline JSX through the #parcel/transformer-react-svg plugin (see docs), but I'm not aware of a similar plugin (yet) for pug templates.)
You can control the structure of the output files in parcel's dist folder by writing a custom namer plugin. I explained how to do this in this answer.
The plugin developer for the first parcel made the build for the parcel v2, and I say thank you! Here is the plugin, tested it with html and pug, everything works! https://github.com/Epimodev/parcel-plugin-svg-sprite
hey guys i have sime markdown (mdx) files that i want to use an svg with. i know that rendering dynamic ANYTHING in gatsby can be tricky.. with gatsby image you often have to filter out the right results. but for svgs specifically i m wondering how i render them dynamically depending on frontmatter in my markdown. i tried doing an <img src={svgpath} /> to no avail. and right now my svgs are beng imported as components using this in my config:
"gatsby-transformer-sharp",
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /assets/
}
}
},
i dont know of a way to dynamically import files nor dynamically render the appropriate svg that matches the name in the markdown. here is as an example of the frontmatter in my markdown:
---
title: Pediatric Dentistry
slug: pediatric-dentistry
svgPath: '../images/assets/dental.svg'
---
how can i do something that dynamically shows the correct svg in my template file for each specific markdown file? i can dynamically render png, jpg, etc but becuase of svgs specific need to be imported as a component using transofmrer-sharp in gatsby im struggling. thanks in advance!
One thing that comes to my mind is to create a kind of map, a key-value pair that imports your desired component. Something like:
import Dental from '../images/assets/dental.svg';
import OtherSvg from '../images/assets/otherSvg.svg';
import OtherLogo from '../images/assets/otherLogo.svg';
const SVGMapper = {
'dental': Dental,
'otherSvg': OtherSvg,
'otherLogo': OtherLogo,
};
export default SVGMapper;
And so on...
Then, to render it from your markdown, you just need to:
let SVGComponent = SVGMapper['dental'];
return <SVGComponent />;
You can make it dynamic using a loop or whatever you want.
You can even change the key (dental, otherSvg and otherLogo) for the path if needed. The approach is exactly the same, you will need to change the key for your SVG path and render SVGMapper[svgPath]
I am running into the problem that I have a 'main layout' which gets extended by other pug files, defining the layout for specific sites.
Example:
main.pug
Path: /we [we.pug extends main.pug]
However, when I start to have routes like /we/are/nice/because which are just specifications of /we and I would like to use the same main.pug, I run into the problem that by the way NodeJS renders the pug files, the src/href paths of JS and CSS includes are off (eg: https://localhost:3001/we/are/nice/script.js won't be found because it is supposed to be at localhost:3001/script.js)
Is there a simple way to fix this issue, or do I need specific main.pug files for all path-depths ?
Have you tried pointing to absolute paths? So /script.js, instead of script.js, in an link/href attribute. This assumes, of course, that the files are served from a server like NodeJS (not by the filesystem).
I just started trying out the TideSDK to deploy a website to .exe and .app, which for the most part is fantastic.
The problem that I'm currently coming across is that all my CSS styles are written in .less styles utilizing the less.js framework. Inside of here, I have custom font-faces declared, and when deployed to a standard web browser, they apply fine to all the elements that use them.
When deployed through Tide, it doesn't seem to stick unless I take all my styling out of .less style sheets and put them back into regular .CSS files, which leads me to believe that there is some sort of compile time change that Tide is using internally when deployed the actual view of the application.
I have no idea how to go about fixing this. As a note, I'm not getting any
[Error] Error finding
errors from the Tide console, which leads me to believe that the .svg's are being found, just not applied.
UPDATE:
It seems I was using wrong syntax in the src: url('...'), so the CSS in the .less file was actually failing silently. I'm getting a pretty strange [Error] Error finding... file for the .svg now. The URL that is inside this line of CSS is being prepended by app: 3 times.
After several hours of looking at this problem, I eventually have figured it out. Couple of things to note when you are using the combination of these frameworks:
less.js spits out really odd path directories when using
src: url('...');
As a solution for this, you can use the import directive that is available to you in less and put the #font-face declarations inside of that .css style sheet. By importing a plain .css style sheet, you are telling less.js to treat it as regular .css, and the muxed url that gets spit out won't happen.
#import "../css/style.css";
After putting the import directive and confirming that the SVG was indeed being generated under Resources - Fonts in the Chrome inspector, I proceeded to take a look at the SVG file itself to determine if there was something wrong in the CSS naming conventions for the SVG file. According to this answer, and the blog post within it, your SVG name should be using:
font-family
value in the naming scheme from the SVG meta data
src: url('YourSVGFont.svg#Silkscreen') format('svg');
when in fact, you should be using the font id, at least that was the solution in my case:
src: url('YourSVGFont.svg#slkscrb') format('svg');
This is the image embedded in the blog post so that you can see what I'm talking about, and see where in the SVG meta data these two names are placed.
All,
Simple question: I want to include an image "logo.png" as the background for my-app. Where should I put the file and how should I refer to it in the CSS file which is in the resources folder along with the main_page.js?
Here is the rest of the story:
I have a CSS class called doc-background. I know this class works because when I set the color of the background in a CSS file like so:
.doc-background { background-color: red} it has the desired effect and Firebug shows me that the class doc-background is being used.
However, when I add a line like
.doc-background { background-image: url('logo.png'); }, there is no effect. Firebug shows that the class doc-background is not applied. And when I modify the style in Firebug to add the line about the background-image it says "Failed to load URL" in the tooltip.
Can someone please point me to a guide on how to work with resources and images and where to put them if I want to use CSS? I have successfully used them using the image-view and coding them into the HTML.
Here is what I have already tried:
Using static-url instead
Moving the image file to images folder under resources
Referred to the image by using all variations on the path - including resources/images only including images, not including either...
Lot of Googling for the answer, Reading create your own app tutorials etc.
If you have an example app that uses colors and images from a CSS that will be the ultimate! But a location and some help with the background-image CSS property will get me started!
Thanks much,
Vis
Place your image somewhere relative to your css:
resources/style.css
resources/images/logo.png
Then use static_url to refer to the image:
background-image: static_url('images/logo.png');