Question 177333 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Can svg components be used in Vuejs?

I’m the react developer, but I’m using vuejs for a project. at react we used to svg image as a component, at vuejs, how can we use similar with reactjs components? if someone use like that could you suggest me pls

Tags:

2

Answers


  1. 0

    you can follow this stips:

    1- Install vue-svg-loader:

    npm install --save-dev vue-svg-loader

    2- Configure webpack:

    module: {
    rules: [
      {
       test: /.svg$/,
       loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
      },
    ],
  },

    3- Import the svg and use it as a regular component:

    <template>
  <nav id="myDiv">
    <a href="...">
      <SomeIcon class="icon" />
      Some page
    </a>
  </nav>
</template>

<script>
import SomeIcon from './assets/myicon.svg';

export default {
  name: 'myDiv',
  components: {
    SomeIcon,
  },
};
</script>
    Login or Signup to reply.
  2. 0

    You can use svg as a component in a Vue project it is similar to the way you use it in a React project, you can create a component that return a svg tag like the example bellow.

    AlarmIcon.vue

    <script setup lang="ts">
const props = withDefaults(
  defineProps<{
    size?: number;
  }>(),
  {
    size: 20,
  }
);

defineExpose(props);
</script>

<script lang="ts">
export default {
  inheritAttrs: true,
};
</script>
<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    :width="size"
    :height="size"
    viewBox="0 0 20 20"
  >
   // your svg path
  </svg>
</template>

    Usage

    <script lang="ts" setup>
import AlarmIcon from './icons/AlarmIcon.vue';
</script>

<template>
  <AlarmIcon :size="22" />
</template>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search