实现一个在 Vue 项目中方便使用 SVG 图标,允许在页面中通过自定义标签直接引用 SVG 图标,无需手动引入每个图标文件。 具体步骤 1. 使用方式 页面中直接写标签,myicon是svg图片文件名,不需要引入。myicon文件放在指定的svg目录中即可。 <svg-icon icon-class="myicon" 2. 实现方式 (1)新建vite文件夹,建一个
import "virtual:svg-icons-register"; // 引入SvgIcon组件 import svgIcon from "@/components/SvgIcon/index.vue"; createApp(App) .use(ElementPlus) .use(router) //注册图标组件 .component('svg-icon', svgIcon) .mount('#app') (五) 使用 组件内使用 封装好的图标组件 1111 <svg-icon name="...
.svgclass { width: 1em; height: 1em; overflow: hidden; vertical-align: top; } 在main.js里注册为全局插件 import 'virtual:svg-icons-register'import SvgIcon from'./components/SvgIcon.vue'app.component('svg-icon', SvgIcon) 就可以在.vue里面使用了 <template> <SvgIcon name="show"></Svg...
import 'virtual:svg-icons-register' 1. 使用方法 在assets/icons/ 下引入 svg 格式的文件,并给图标命名。 只需在需要的地方,使用 svg 引入图标即可。需要注意的点是:xlink:href用哪个图标,其属性值必须是 #icon-图标名字。 <svg width="100" height="100"> <use xlink:href="#icon-music"></use> </...
1. 如何在 Vue3 项目中导入和使用 SVG 图标? 在Vue3 项目中,您可以使用Vue SVG Loader来导入和使用 SVG 图标。首先,您需要在项目的依赖中安装vue-svg-loader,然后在vue.config.js文件中进行配置。接下来,您可以在 Vue 组件中使用import导入 SVG 文件,并在模板中使用它们。您还可以使用v-bind绑定 SVG 的属性...
在SvgIcon组件中定义props,接收图标名称: 在上面的SvgIcon.vue文件中,我们已经定义了props,并接收了name属性,该属性用于指定要渲染的SVG图标的名称。 使用SVG图标库中的图标,根据传入的图标名称动态渲染SVG图标: 现在你可以在你的Vue组件中使用SvgIcon组件,并传入图标的名称来动态渲染SVG图标。例如: vue <!-...
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' //+ 新增 // https://vitejs.dev/config/ export default defineConfig({ base: './', server: { port: 10010 }, plugins: [ vue(), createSvgIconsPlugin({ //+ 新增 iconDirs: [fileURLToPath(new URL('./src/assets/svg', ...
浏览器渲染svg的性能一般,还不如png。 第一步:拷贝项目下面生成的symbol代码: 第二步:加入通用css代码(引入一次就行: .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } 第三步:挑选相应图标并获取类名,应用于...
.svg-icon{ width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } 5. index.js的内容如下 import Vue from "vue" import svgIcon from "./index.vue" Vue.component('svg-icon',svgIcon) //挂载全局组件 //下面这个...
type:String,default:"#icon-"}, name:String, } ) 四、注册全局组件 main.ts 1、引入 import SvgIcon from './components/SvgIcon.vue' 2、注册 app.component('SvgIcon', SvgIcon) 五、使用 <svg-icon name="love" width="40" height="40" color="red"></svg-icon>...