Skip to content
This repository has been archived by the owner on Oct 1, 2023. It is now read-only.

Commit

Permalink
nest dir svg fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
ewilan-riviere committed Nov 28, 2022
1 parent 0043e95 commit de51b98
Show file tree
Hide file tree
Showing 8 changed files with 13 additions and 7 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ In any Vue component.
<div>
<svg-icon name="home" /> <!-- inject home.svg -->
<svg-icon name="abut" /> <!-- Type error! -->
<svg-icon name="nest-dir-arrow" /> <!-- inject nest-dir/arrow.svg -->
<svg-icon name="nest-dir/arrow" /> <!-- inject nest-dir/arrow.svg -->
</div>
</template>
```
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "nuxt-svg-transformer",
"version": "0.0.22",
"version": "0.0.23",
"description": "Transform dynamically SVG into Vue component.",
"repository": "kiwilan/nuxt-svg-transformer",
"license": "MIT",
Expand Down
6 changes: 4 additions & 2 deletions playground/app.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { Icon } from './.nuxt/icons'
import type { IconType } from './.nuxt/icons/components'
const current = ref<Icon>('heart')
const current = ref<IconType>('heart')
onMounted(() => {
setTimeout(() => {
Expand All @@ -15,6 +15,8 @@ onMounted(() => {
<div>
<SvgIcon name="settings" class="w-6 h-6" />
<SvgIcon name="setting" />
<SvgIcon name="download/direct" />
<SvgIcon name="server-logo/server-icon" />
<SvgIcon :name="current" reactive />
Nuxt module playground!
</div>
Expand Down
7 changes: 4 additions & 3 deletions src/icons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export class Icons {

icons.createPaths()
icons.files = await icons.sync()

icons.types = icons.setTypes()
icons.convertSvg()

Expand All @@ -52,7 +53,7 @@ export class Icons {
*/
private convertSvg(): void {
this.files.forEach((file) => {
const stream = createWriteStream(`${this.paths.cache}/${file.slug}.ts`)
const stream = createWriteStream(`${this.paths.cache}/${file.filename}.ts`)
stream.once('open', () => {
stream.write(`const ${file.camelCase} = '${this.prepareSvg(file.path)}'\n`)
stream.write(`export default ${file.camelCase}\n`)
Expand All @@ -74,7 +75,7 @@ export class Icons {
private setTypes(): string {
let types = this.types
this.files.forEach((file) => {
types += `'${file.slug}' | `
types += `'${file.name}' | `
})
types = types.slice(0, -3)

Expand All @@ -85,7 +86,7 @@ export class Icons {
// Write all SVG to TS file.
stream.write('export const IconList: Record<IconType,Promise<{default: string}>> = {\n')
this.files.forEach((file) => {
stream.write(` '${file.slug}': import('./${file.slug}'),\n`)
stream.write(` '${file.name}': import('./${file.filename}'),\n`)
})
stream.write('}\n')
stream.end()
Expand Down
2 changes: 2 additions & 0 deletions src/reader.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { readdir } from 'fs/promises'

export interface File {
name: string
filename: string
slug: string
camelCase: string
path: string
Expand Down Expand Up @@ -50,6 +51,7 @@ export default class Reader {

filesList.push({
name: fullName,
filename: fullName.replace('/', '-'),
slug: this.slugify(fullName),
camelCase: this.camalize(fullName),
path: file,
Expand Down
1 change: 1 addition & 0 deletions src/runtime/component.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const props = withDefaults(defineProps<Props>(), {
title: undefined,
lazy: undefined,
reactive: undefined,
log: undefined,
})
const options = {
Expand Down

0 comments on commit de51b98

Please sign in to comment.