脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3使用svg图标

vue3使用svg图标的多种方式总结

 更新时间：2023年03月24日 09:49:30   作者：@小朱呀路  
svg图片在项目中使用的非常广泛,下面这篇文章主要给大家介绍了关于vue3使用svg图标的多种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

方式1使用在线链接访问

在iconfont找到自己的项目的图标选择Symbol获取在线链接

2：在vue3项目中找到public的index.html进行script进行引入

打开浏览器看：这样就会自动注入到body下

在项目直接使用

   //控制图标的大小
   <svg style="width: 10px; height: 10px">
      <use href="#icon-shanchu" rel="external nofollow" ></use>
    </svg>

显示出了删除的图标

封装的写法(上面的代码写着太重复下面进行封装)

1:新建一个专门获取svg图标的组件

icon.vue (svg/index.vue)

 <template>
  <div>
    <svg :style="style">
      <use :href="names" rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
  </div>
</template>

<script setup>
import { defineProps, withDefaults } from "vue";
const props = defineProps({
  name: {
    type: String,
    default: "",
  },
  style: {
    type: Object,
    default: () => {
      return {
        width: 10,
        height: 10,
        color: "",
      };
    },
  },
});
const names = `#${props.name}`;
</script>

<style lang="scss" scoped></style>

需要显示图标的界面

<template>
  <div class="home"> 
    <icon   :style="{ width: 10, height: 10, color: 'red' }"  name="icon-shanchu"  ></icon>
    <icon   :style="{ width: 10, height: 10, color: 'red' }"  name="icon-shanchu"  ></icon>
  </div>
</template>

<script setup>
import { ref } from "vue";
import icon from "../assets/svg/index.vue";
</script>
<style lang="scss">
 
</style>

假如你既引用了iconfont的图标也自定义了图标：直接放在一起根据传输的name指定使用哪一个图标

icon.vue (svg/index.vue)

<template>
  <div>
    <svg :style="style">
      <use :href="names" rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
   // 自定义的图标
    <svg width="0" height="0">
      <defs>
        <symbol id="more" viewBox="0 0 100 100">
          <circle
            r="5"
            cx="20"
            cy="25"
            fill="transparent"
            stroke="green"
          ></circle>
          <circle r="5" cx="20" cy="50" fill="currentColor"></circle>
          <circle r="5" cx="20" cy="75" fill="currentColor"></circle>
          <line
            x1="40"
            y1="25"
            x2="90"
            y2="25"
            stroke-width="8"
            stroke="currentColor"
          ></line>
          <line
            x1="40"
            y1="50"
            x2="90"
            y2="50"
            stroke-width="8"
            stroke="currentColor"
          ></line>
          <line
            x1="40"
            y1="75"
            x2="90"
            y2="75"
            stroke-width="8"
            stroke="currentColor"
          ></line>
        </symbol>  
      </defs>
    </svg>
  </div>
</template>

<script setup>
import { defineProps, withDefaults } from "vue";
const props = defineProps({
  name: {
    type: String,
    default: "",
  },
  style: {
    type: Object,
    default: () => {
      return {
        width: 10,
        height: 10,
        color: "",
      };
    },
  },
});
const names = `#${props.name}`;
</script>

<style lang="scss" scoped></style>

使用：

<template>
  <div class="home"> 
    <icon  :style="{ width: 10, height: 10, color: 'red' }"   name="icon-shanchu" ></icon>
    <icon  :style="{ width: 10, height: 10, color: 'red' }"  name="icon-shanchu1"  ></icon>
    <icon :style="{ width: 20, height: 20, color: 'red' }" name="more"></icon>
  </div>
</template>

<script setup>
import { ref } from "vue";
import icon from "../assets/svg/index.vue";
</script>
<style lang="scss">
 
</style>

假如你是复制的iconfont官网的图标svg的代码：

你直接cv到项目也可以直接使用：

<svg
      t="1673881805558"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="1076"
      width="200"
      height="200"
    >
      <path
        d="M658.276045 767.993958 658.276045 274.295l329.126 0L987.402045 219.44 658.276 219.44l0-18.281c0-80.787046-65.492992-146.284032-146.276045-146.284032-80.790016 0-146.276045 65.496986-146.276045 146.284032l0 18.281L36.597 219.44l0 54.855 109.695 0 0 694.83L877.7 969.125l0-548.55-54.855 0L822.845 914.27l-621.69 0L201.155 274.295l164.569 0 0 493.699 54.848 0L420.572 274.295l182.85 0 0 493.699L658.276 767.994zM420.571034 219.440026l0-18.281c0-50.492006 40.932966-91.420979 91.428966-91.420979 50.489037 0 91.420979 40.928973 91.420979 91.420979l0 18.281L420.571 219.440026z"
        p-id="1077"
      ></path>
    </svg>

效果如下：

我们还可以把上面的代码进行改造直接使用在 icon.vue (svg/index.vue)改造

 <template>
  <div class="home">
    <icon
      :style="{ width: 10, height: 10, color: 'red' }"
      name="icon-shanchu"
    ></icon>
    <icon
      :style="{ width: 10, height: 10, color: 'red' }"
      name="icon-shanchu1"
    ></icon>
    <icon :style="{ width: 20, height: 20, color: 'red' }" name="more"></icon>
    <svg
      t="1673881805558"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="1076"
      width="200"
      height="200"
    >
      <path
        d="M658.276045 767.993958 658.276045 274.295l329.126 0L987.402045 219.44 658.276 219.44l0-18.281c0-80.787046-65.492992-146.284032-146.276045-146.284032-80.790016 0-146.276045 65.496986-146.276045 146.284032l0 18.281L36.597 219.44l0 54.855 109.695 0 0 694.83L877.7 969.125l0-548.55-54.855 0L822.845 914.27l-621.69 0L201.155 274.295l164.569 0 0 493.699 54.848 0L420.572 274.295l182.85 0 0 493.699L658.276 767.994zM420.571034 219.440026l0-18.281c0-50.492006 40.932966-91.420979 91.428966-91.420979 50.489037 0 91.420979 40.928973 91.420979 91.420979l0 18.281L420.571 219.440026z"
        p-id="1077"
      ></path>
    </svg>
    //改造好了直接使用
    <icon :style="{ width: 20, height: 20, color: 'red' }" name="icon"></icon>
  </div>
</template>

<script setup>
import { ref } from "vue";
import icon from "../assets/svg/index.vue";
</script>
<style lang="scss">
 
</style>

总结 

到此这篇关于vue3使用svg图标的多种方式总结的文章就介绍到这了,更多相关vue3使用svg图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue 点击展开显示更多(点击收起部分隐藏)

    vue 点击展开显示更多(点击收起部分隐藏)

    这篇文章主要介绍了vue 点击展开显示更多(点击收起部分隐藏)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 一篇文章带你吃透Vue生命周期(结合案例通俗易懂)

    一篇文章带你吃透Vue生命周期(结合案例通俗易懂)

    这篇文章主要给大家介绍了关于如何通过一篇文章带你吃透Vue生命周期，文章通过结合案例更加的通俗易懂,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-02-02
  • vue实现百度下拉列表交互操作示例

    vue实现百度下拉列表交互操作示例

    这篇文章主要介绍了vue实现百度下拉列表交互操作,结合实例形式分析了vue.js使用jsonp针对百度接口进行交互的相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • Vue实现向PDF文件中添加二维码

    Vue实现向PDF文件中添加二维码

    这篇文章主要为大家详细介绍了如何利用Vue实现向PDF文件中添加二维码的功能，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
    2023-06-06
  • 解决iview多表头动态更改列元素发生的错误的方法

    解决iview多表头动态更改列元素发生的错误的方法

    这篇文章主要介绍了解决iview多表头动态更改列元素发生的错误的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue接入高德地图绘制扇形效果的案例详解

    vue接入高德地图绘制扇形效果的案例详解

    这篇文章主要介绍了vue接入高德地图绘制扇形，需求是有一个列表，列表的数据就是一个基站信息，包含基站的经纬度信息和名字，基站下面又分扇区，本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下
    2022-04-04
  • vue组件中的数据传递方法

    vue组件中的数据传递方法

    这篇文章主要介绍了vue组件中的数据传递方法,非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
    2018-05-05
  • 解决Vue3 echarts v-show无法重新渲染的问题

    解决Vue3 echarts v-show无法重新渲染的问题

    这篇文章主要介绍了Vue3 echarts v-show无法重新渲染的问题,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-09-09
  • Vue公共loading升级版解决思路(处理并发异步差时响应)

    Vue公共loading升级版解决思路(处理并发异步差时响应)

    这篇文章主要介绍了Vue公共loading升级版（处理并发异步差时响应）,解决思路是通过定义一个全局对象来存储每个接口的响应状态，直到每个请求接口都收到响应才变更状态，结束loading动画，需要的朋友可以参考下
    2023-11-11
  • Vue进阶之CodeMirror的应用小结

    Vue进阶之CodeMirror的应用小结

    CodeMirror支持在线编辑代码，风格包括js, java, php, c++等等100多种语言，下面这篇文章主要来和大家讲讲CodeMirror的应用，感兴趣的可以了解一下
    2023-06-06

最新评论