the fonts on the web were not complete and we had to put some extra SVG
s into the project
if you import a SVG
as an image, you cant change it's color and you have to import it's xml tree in your HTML
so I wrote a script in nim that compiles SVG
into vue templates
for example assets/database.svg
:
<svg
class="svg-icon"
style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
viewBox="0 0 1024 1024"
version="1.1">
<path
d="..."
id="path883"
style="fill:#bd9800;fill-opacity:1" />
<path
d="..."
id="path885"
style="fill:#bd9800;fill-opacity:1" />
<path
d="..."
id="path887"
style="fill:#bd9800;fill-opacity:1" />
...
</svg>
converts to
<template>
<svg version="1.1" viewBox="0 0 1024 1024">
<path d="..." />
<path d="..." />
<path d="..." />
...
</svg>
</template>
<script>
export default {
name: "i-database",
}
</script>
<style scoped="scoped">
svg{
vertical-align: middle;
overflow: hidden
}
</style>
use app -h
or app --help
to see the usage
you can pass fill
attribute directly or use fill
property in a css class
this is also valid for width
and height
attributes
<template>
<i-db class="large" fill="#c0ffee"/>
</template>
<script>
import Database from "@/components/icons/icon-file-name.vue"
export default {
name: "home",
components: {
'i-db': Database,
}
}
</script>
<style>
.large{
width: 200px;
height: 200px;
}
</style>
- built-in file watcher + database
you must have nim >= 1.5.1 installed [it's devel version at the time of writing this] and then enter:
nimble build