I have a library of icons (icon system) in svg. Each svg has his own component inside Vue in the same way as Sarah Drasner's icon system.
I want to import an svg into a js library which allow only icon provided with url. I could have a separate svg file, but I want to style dynamically the fill color with my color system.
The only way I've found is to render and encode the component into base64.
I've found a simple helper for React, but I'm struggling to reproduce the idea with Vue, Vue.Compile, Render, etc.
Related
I am trying to make my own icon picker (similar to the fontawesome Icon Picker)in a Vuejs project and I was wondering if there was a way to load all of the svgs I have in my specific svgs folder to then display them on a page.
Is there a best way of going about this?
In VueJS,I can't import a folder full of svgs I believe, so how can you load all imgs/svgs from a single folder.
Should I load all svgs into a separate component and import that component somewhere else?
I'm not looking for someone to do this for me, but I am relatively new to coding and am not sure where to start with this implimentation and could really use some guidance!
Cheers!
This is a snapshot of what I am looking to build (obviously with all different svgs):
The list of svgs also look some thing like this:
I want to generate svg compoenents which uses svg tags. Does Vue supports that?
Note, that svg elements needs to be created in the corretc namespace and vue might not be able to handle that out of the box
Yes, you can use Vue to create dynamic SVGs. There even is an example in the docs. In this podcast, Sarah Drasner talks about the combination of Vue, SVG and https://greensock.com/.
I have used this approach to build https://fn.hofmann-vratny.de/configurator, which simply binds SVG elements/properties to reactive Vue data. This worked really well for me.
You can create a component and add the SVG tags inside like:
<template> SVG Content Here </template>
Note: You might find some issues with certain SVG tags.
There's also some libraries you can use like svg-to-vue-component
Hope this helps.
I am not able to find information on how to modify the main page of Vuepress, which, although I like its structure, being in .yaml format does not allow me to put links.
Is it possible to put links?
Or better, is it possible to convert that page to markdown format but keeping the output it delivers?
Unfortunately it is not possible without modifying the Vue templates. The home page is rendered by the Home component component and it renders the page's frontmatter using Vue's "Mustache" syntax. Values inside the mustaches will only ever be rendered as plain text.
You'll have to modify the Home component by either "ejecting" the default theme or by creating a custom layout for the home page. In both cases, you will obviously not receive any updates to the components anymore when you upgrade Vuepress.
I've created a demo to show how to use a custom layout to allow the frontmatter to be HTML. I've copied the Layout and Home components from Vuepress and changed the new Home component to use v-html to inject HTML values into the h1 component. So now your heroText could be Hi! This is a <a href='https://www.google.com'>link</a> and it will be displayed as a link on the home page. You could obviously do the same for the other elements.
Be sure to set the layout value of your home page to the new layout, e.g. layout: HomeLayout.
I'm searching without success information everywhere on the web on how to create an SVG Rect element in React-Native using the react-native-svg feature.
What I reached so far is to define some SVG elements in a component and to pass props to the existing SVG Elements like Rect , Circle and so on.
But how can I programmatically create a random number of SVG elements and to attach them to the component ? Sadly, it is not specified in the documentation.
I could not find anything on the react-native-svg also.
But this post could be helpfull: How to show SVG file on React Native?.
You have to convert the .svg to JSX like is answered there by Ihor Burlachenko, notice that react-native is deferent from react, in react-native you need to use the react-native-svg module to create the svg JSX component
Consider Using Draft.js for rich text editing on the web app, then convert the output to a json object with Draft.js convertToRaw function and store it in the database.
if the consumer of the rich text is a react-native mobile application, what is the best approach to represent the rich text?
is there any robust work or library that iterate through the json object and export native Text and Image components?
also there are some libraries that export the json object to html:
https://github.com/sstur/draft-js-export-html
https://github.com/rkpasia/draft-js-exporter
the exported html then can be represented with a webview component. is this a reliable approach?
another way for representation would be putting react in react-native webview and use Draft.js Editor with readOnly prop. but I don't have any idea which way to go!
This seems to be the best approach.
You must fetch the json and write a parser that understands Draft.js model (inlineStyleRanges, entityRanges, entityMap,...) and based on that, exports to native components.
At work we had the same problem, so we've developed a library that does the job, it's called react-native-draftjs-render.
It has a sample project where you can see how it works and understand how to use it. It is also available on npm.
If you already have the html version and want to use it, you will also need a parser to convert the html into native components. react-native-htmlview seems to do it but I've never used.
Render native components is better than using webviews (they are very limited and slow), so I don't recommend this approach.
We use redraft to approach that rich text from draft-js render to HTML5 and Weex(rax). And I am sure you can use it achieve your goal because the redraft is just a convert function with zero dependencies, you can custom the render element like div in HTML or View in React Native.