svg使用基础入门

vite环境使用

安装依赖：

npm install vite-plugin-svg-icons -D

在vite.config.ts中配置插件

const viteConfig = defineConfig((mode: ConfigEnv) => {
    return {
        plugins: [
            vue(), // Vue 插件
            createSvgIconsPlugin({
                // Specify the icon folder to be cached
                iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')], //这里是svg文件夹
                // Specify symbolId format
                symbolId: 'icon-[dir]-[name]',
            })
        ],
    }
}

在main.ts中引入

import 'virtual:svg-icons-register'

使用：

<svg>
    <use xlink:href="#icon-database" fill="red"></use>
    <!--    简写-->
    <use href="#icon-database" fill="red"></use>
</svg>

在HTML5中，xlink:href可以被简写为href，因为HTML5已经包含了对XLink命名空间的支持。

svg图标地址：iconfont-阿里巴巴矢量图标库