Svgicon не виден в браузереJavascript

Форум по Javascript
Ответить
Anonymous
 Svgicon не виден в браузере

Сообщение Anonymous »

Я следую указаниям в:
https://mmf-fe.github.io/svgicon/guide/#vue-3-xобразно Я только что изменяю arrow.svg (я не знаю в файле Witch, документация относится): < /p>
Также я создал проект с: < /p>

Код: Выделить всё

npm create vuetify@latest
< /code>
Это мой login.vue < /p>

//import arrowData from "./arrow.svg"








< /code>
Это мой main.js: < /p>
/**
* main.js
*
* Bootstraps Vuetify and other plugins then mounts the App`
*/

import { VueSvgIconPlugin } from '@yzfe/vue-svgicon'
import '@yzfe/svgicon/lib/svgicon.css'

// Plugins
import { registerPlugins } from '@/plugins'

// Components
import App from './App.vue'

// Composables
import { createApp } from 'vue'

const app = createApp(App)

registerPlugins(app)

app.mount('#app')

app.use(VueSvgIconPlugin, {tagName: 'icon'})
< /code>
Это моя стрелка.svg: < /p>




.st0{display:none;fill:#191919;}
.st1{display:none;fill-rule:evenodd;clip-rule:evenodd;fill:#191919;}
.st2{display:none;}
.st3{display:inline;fill-rule:evenodd;clip-rule:evenodd;fill:#191919;}
.st4{display:inline;fill:#191919;}
.st5{fill:#191919;}


l-13.9,21.6c-1.9-1-4.1-1.6-6.4-1.6c-7.3,0-13.3,5.8-13.3,13c0,7.2,5.9,13,13.3,13s13.3-5.9,13.3-13c0-2.9-0.9-5.5-2.5-7.7
l14.4-22.3c1.4,0.5,2.9,0.8,4.5,0.8c7.3,0,13.3-5.8,13.3-13s-5.9-13-13.3-13c-5.4,0-10,3.2-12.1,7.7l-40.7-8.1
c-0.1-4.1-2.1-7.7-5.2-10l10.1-23.5c1,0.2,2,0.4,3.1,0.4c7.3,0,13.3-5.8,13.3-13S59.5,0,52.2,0c-7.3,0-13.3,5.8-13.3,13
c0,4.2,2,7.9,5.1,10.3L33.8,46.9c-0.9-0.2-1.9-0.3-2.8-0.3C23.7,46.6,17.7,52.4,17.7,59.6z M45.5,13c0-3.6,3-6.5,6.6-6.5
c3.7,0,6.6,2.9,6.6,6.5s-3,6.5-6.6,6.5C48.5,19.6,45.5,16.6,45.5,13z M90.4,72.7c0-3.6,3-6.5,6.6-6.5c3.7,0,6.6,2.9,6.6,6.5
s-3,6.5-6.6,6.5C93.3,79.2,90.4,76.3,90.4,72.7z M67.3,108.4c3.7,0,6.6,2.9,6.6,6.5c0,3.6-3,6.5-6.6,6.5c-3.7,0-6.6-2.9-6.6-6.5
C60.7,111.3,63.7,108.4,67.3,108.4z M24.4,59.6c0-3.6,3-6.5,6.6-6.5c3.7,0,6.6,2.9,6.6,6.5c0,3.6-3,6.5-6.6,6.5
C27.3,66.2,24.4,63.2,24.4,59.6z"/>

























< /code>
Но когда я собираюсь увидеть значок, я вижу: < /p>

Я аспект, чтобы увидеть значок или ошибку, но я не вижу ни одной ошибки, ни значка 
А также, если я собираюсь изменить login.vue таким образом: < /p>

import arrowData from "./arrow.svg"



<      



< /code>
во время компиляции я получаю: < /p>

C:\Users\vis\Corso_vue\prova3\mybadge>npm run dev

> mybadge@0.0.0 dev
> vite

VITE v5.4.14  ready in 518 ms

➜  Local:   http://localhost:3000/
➜  Network: use --host to expose
➜  press h + enter to show help
21:53:31 [vite] hmr update /src/views/session/Login.vue
21:53:31 [vite] Internal server error: Failed to resolve import "./arrow.svg" from "src/views/session/Login.vue". Does the file exist?
Plugin: vite:import-analysis
File: C:/Users/vis/Corso_vue/prova3/mybadge/src/views/session/Login.vue:2:22
1  |  /* unplugin-vue-components disabled */import { defineComponent as _defineComponent } from "vue";
2  |  import arrowData from "./arrow.svg";
|                         ^
3  |  const _sfc_main = /* @__PURE__ */ _defineComponent({
4  |    __name: "Login",
at TransformPluginContext._formatError (file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:49257:41)
at TransformPluginContext.error (file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:49252:16)
at normalizeUrl (file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:64199:23)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:64331:39
at async Promise.all (index 1)
at async TransformPluginContext.transform (file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:64258:7)
at async PluginContainer.transform (file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:49098:18)
at async loadAndTransform (file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:51931:27)
at async viteTransformMiddleware (file:///C:/Users/vis/Corso_vue/prova3/mybadge/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:62031:24)
Я знаю, что в одном вопросе есть две проблемы, но я трачу весь день, пытаясь решить проблему, но вообще нет надежды.

Подробнее здесь: https://stackoverflow.com/questions/794 ... on-browser
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»