美文网首页
通过vite-plugin-svg-icons 使用SVG图片

通过vite-plugin-svg-icons 使用SVG图片

作者: 煎鸡蛋的梦_ | 来源:发表于2024-03-13 13:49 被阅读0次

一、安装 vite-plugin-svg-icons

    npm i vite-plugin-svg-icons -D

    // 或者

    yarn add vite-plugin-svg-icons -D

二、在main.js引入

import 'virtual:svg-icons-register'

三、配置SVG图片文件夹

四、在vite.config.js中配置

//import path,{ resolve } from 'path'

import path from 'path'

import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'

export default defineConfig((command) => {

return {

    plugins: [

      createSvgIconsPlugin({

        // 指定要缓存的文件夹

        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],

        // 指定symbolId格式

        symbolId: '[name]'

      })

    ],

}

})

五、新建svg封装组件,路径参考:src\components\svg-icon\index.vue

<template>

  <svg :class="svgClass" aria-hidden="true">

    <use class="svg-use" :href="symbolId" />

  </svg>

</template>

<script>

  import { defineComponent, computed } from 'vue'

  export default defineComponent({

    name: 'SvgIcon',

    props: {

      prefix: {

        type: String,

        default: 'icon'

      },

      name: {

        type: String,

        required: true

      },

      className: {

        type: String,

        default: ''

      }

    },

    setup(props) {

      const symbolId = computed(() => `#${props.name}`)

      const svgClass = computed(() => {

        if (props.className) {

          return `svg-icon ${props.className}`

        }

        return 'svg-icon'

      })

      return { symbolId, svgClass }

    }

  })

</script>

<style scope>

  .svg-icon {

    vertical-align: -0.1em; /* 因icon大小被设置为和字体大小一致,而span等标签的下边缘会和字体的基线对齐,故需设置一个往下的偏移比例,来纠正视觉上的未对齐效果 */

    fill: currentColor; /* 定义元素的颜色,currentColor是一个变量,这个变量的值就表示当前元素的color值,如果当前元素未设置color值,则从父元素继承 */

    overflow: hidden;

  }

</style>

六、按需引入使用

<template>

  <SvgIcon name="issue"></SvgIcon>

</template>

<script setup>

import SvgIcon from "@/components/SvgIcon.vue";

</script>

七、全局引入使用

在main.js中加入

import svgIcon from './components/svgIcon/index.vue'

createApp(App).component('svg-icon', svgIcon)

相关文章

  • vite-plugin-svg-icons插件封装SvgIcon

    通过 vite-plugin-svg-icons 插件封装SvgIcon组件 配置 vite.config.ts ...

  • vue3 + vite 组件

    svg 组件 组件文档:README vite-plugin-svg-icons[https://github.c...

  • vite-ts-vue3.0引入svg

    使用vite-plugin-svg-icons插件 vite.config.ts 中的配置插件 在 src/mai...

  • vite2-vue3使用svg图标

    vite 下载入 svg 图标 安装插件:vite-plugin-svg-icons:https://www.np...

  • Android通过url加载SVG图片

    网络SVG图片的显示 1、通过OkHttp等网络框架获取到SVG图片的String字符串2、使用第3方库Sharp...

  • SVG use使用

    平时使用svg,都是当成图片来使用,直接用img标签像引入图片一样引入svg。现在认识一下SVG Sprite技术...

  • AI导出svg图片位置改变

    在AI中导出svg格式时,使用存储为svg,不使用导出为svg(注:导出为svg会使图片出现位置改变等)

  • android apk瘦身

    apk打包流程图 1,SVG图片替换PNG图片 使用svg图注意事项: 1 svg图适用于小图标,svg宽高 小于...

  • Android apk大小优化方案

    1.减少图片的体积 SVG IconFont 使用 svg格式的不能直接使用 需将图片转化成vector的xml文...

  • APK瘦身

    SVG矢量图的使用 用于200*200以下的图片多个SVG转换为Android的Vector,可以通过第三方工具s...

网友评论

      本文标题:通过vite-plugin-svg-icons 使用SVG图片

      本文链接:https://www.haomeiwen.com/subject/eaiqudtx.html