• 技术文章 >web前端 >Vue.js

    深入浅析vue3+vite中怎么使用svg图标

    青灯夜游青灯夜游2022-04-28 20:58:47原创937
    svg图片在项目中使用的非常广泛,下面本篇文章带大家介绍一下如何在vue3 + vite 中使用svg图标,希望对大家有所帮助!

    vite-plugin-svg-icons

    (学习视频分享:vuejs教程

    安装

    node version: >=12.0.0 vite version: >=2.0.0

    yarn add vite-plugin-svg-icons -D
    # or
    npm i vite-plugin-svg-icons -D
    # or
    pnpm install vite-plugin-svg-icons -D

    使用

    import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
    import path from 'path'
    
    export default () => {
      return {
        plugins: [
          createSvgIconsPlugin({
            // 指定需要缓存的图标文件夹
            iconDirs: [path.resolve(process.cwd(), 'src/icons')],
            // 指定symbolId格式
            symbolId: 'icon-[dir]-[name]',
    
            /**
             * 自定义插入位置
             * @default: body-last
             */
            // inject?: 'body-last' | 'body-first'
    
            /**
             * custom dom id
             * @default: __svg__icons__dom__
             */
            // customDomId: '__svg__icons__dom__',
          }),
        ],
      }
    }
    import 'virtual:svg-icons-register'

    如何在组件中使用

    /src/components/SvgIcon/index.vue

    <template>
      <svg aria-hidden="true" class="svg-icon" :width="props.size" :height="props.size">
        <use :xlink:href="symbolId" :fill="props.color" />
      </svg>
    </template>
    
    <script setup>
    import { computed } from 'vue'
    const props = defineProps({
      prefix: {
        type: String,
        default: 'icon'
      },
      name: {
        type: String,
        required: true
      },
      color: {
        type: String,
        default: '#333'
      },
      size: {
        type: String,
        default: '1em'
      }
    })
    
    const symbolId = computed(() => `#${props.prefix}-${props.name}`)
    </script>
    # src/icons
    
    - icon1.svg
    - icon2.svg
    - icon3.svg
    - dir/icon1.svg
    # src/main.js
    
    import { createApp } from 'vue'
    import App from './App.vue'
    import router from './router'
    
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    
    import svgIcon from "@/components/SvgIcon/index.vue";
    import 'virtual:svg-icons-register'
    
    createApp(App)
        .use(ElementPlus)
        .use(router)
        .component('svg-icon', svgIcon)
        .mount('#app')
    <template>
        <svg-icon v-if="props.icon" :name="props.icon" />
        <span v-if="props.title" slot='title'>{{ props.title }}</span>
    </template>
    
    <script setup>
    
    const props = defineProps({
        icon: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        }
    })
    </script>

    获取所有 SymbolId

    import ids from 'virtual:svg-icons-names'
    // => ['icon-icon1','icon-icon2','icon-icon3']

    (学习视频分享:web前端开发编程入门

    以上就是深入浅析vue3+vite中怎么使用svg图标的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:vite vue3 svg Vue
    上一篇:为什么用vue的反向代理 下一篇:5 款适合国内使用的 Vue 移动端 UI 组件库
    千万级数据并发解决方案

    相关文章推荐

    • Vue.js中如何优化性能?9个小技巧分享• Vue3计算属性是如何实现的?聊聊实现原理• 了解vue中的单项数据流和双向数据绑定,两种冲突吗?• 手把手带你使用Vue + Laravel开发一个简单的 CRUD 应用• 总结分享Vue中实现组件间通讯的多种方式,再也不怕面试了!• 聊聊Vue的新型前端构建工具 Vite(初体验)
    1/1

    PHP中文网