I'd like to use ionic icons dynamically like this:
<ion-icon src="https://eu.ui-avatars.com/api/?background=0D8ABC&color=fff"></ion-icon>
Any idea how to make this work? (if it's possible)
The ion-icon component only accepts valid .svg files for src='/path/to/file.svg' attribute. As stated from the Ionicon documentation.
Custom icons
To use a custom SVG, provide its url in the src attribute to request the external SVG file. The src attribute works the same as in that the url must be accessible from the webpage that's making a request for the image. Additionally, the external file can only be a valid svg and does not allow scripts or events within the svg element.
<ion-icon src="/path/to/external/file.svg"></ion-icon>
The image in your src attribute is a .png format instead of a .svg which the component is expecting. This will then cause the component not to render the icon. If you instead use .svg it will turn out the way you expect.
Related
I’m using capacitor pdf-generator plugin to create a pdf. I managed to do so as long as the html code is limited to non image tag, code in which I inject some dynamic data by nesting variable using ${ }.
Now, my aim is to bind the src attribute of an ```img`` tag to a variable so that I can change the logo displayed in the created PDF.
Where I fail: what appears on the PDF is a white space with dashed borders (check picture attached). So I guess that the path must be correct because if not it would show the missing icon (issue I went through before I could format correctly the path).
Anyone who already had that trouble?
Finally bypassed this issue by storing the base64 data when selecting a logo and using it directly in the img tag.
<img src="data:image/png;base64,${base64data} " />
You can convert the images to base64 here https://www.base64-image.de/
then add the codes directly to your image tag
I am trying to create custom icons (so svgs) in Adobe Illustrator for flutter so I am trying to load svg files into fluttericon. However, once I upload the svg file to fluttericon it only shows an outline and the actual symbol is not showing.
In Illustrator, I tried to Saves as SVG, Export as SVG and Exports for Screens -> SVG but none of them seem to work.
Am I missing something? If I upload another svg I got online it works perfectly fine.
I figured it out: In Illustrator, you need to turn the shapes into a compound path first and then export as svg (Object -> Compound path -> make). That way it shows up fine in fluttericon.
fluttericon has a good explanation for that as well: https://github.com/fontello/fontello/wiki/How-to-use-custom-images#importing-svg-images
Is it possible to have access or use file icons inside a webview? The icons on the side of each file/folder in the explorer.
My project has a custom activity bar, where I would like to show icons for a file type, preferably using the current Icon Theme, is this possible?
I've seen that code icons can be used, injecting the css in the webview:
const codiconsUri = webview.asWebviewUri(
vscode.Uri.joinPath(extensionUri, 'node_modules', 'vscode-codicons', 'dist', 'codicon.css'),
);
Then used like this inside the webview's HTML:
<i class="codeicons codeicons-beaker"></i>
But I have not been able to find any reference about how to do this with file icons.
I have the same issue.
I notice that the error code is 401(Unauthorized) when loading the codicon.css.
But it works if I copy the codicon.css and codicon.ttf files to the other folder which is the same level as the node_modules.
I am working on create an extension. My content got a upload part to upload image in the backend. I want to get that uploaded image to use as background image in css. Are there any ways to get the upload image url and which between inline css and css file which one i should use in this situation?
My element i want to set the background image:
I would prefer to use inline styles for the background image. You can get the URL of the image with the f:uri.image view helper:
<div style="background-image:url({f:uri.image(src: '{imageField}')});">
When I try to display a local HTML page un a UIWebView, the CSS for that page is not being applied. However, when I load that same page in the regular Safari, it is. What could be causing this?
I assume you are using loadHTMLString to populate the content of the UIWebView? Is your CSS embedded in the HTML that you are loading into the view? If it references a file online, check that the URL file is the full path (not just the relative path).
If the CSS is referenced using a relative path it will work fine in the browser, but not in a UIWebView with statically loaded content.