在真实的企业级开发中,Element Plus内置的图标通常很难满足业务需求,项目中需要引入大量的 SVG 图标资源,本文描述如何在 Vue3 + Vite2 环境中使用 SVG 图标,封装一个支持本地 SVG 图标和在线 SVG 图标的组件svg-icon。 文中实现的svg-icon组件会内置到yyg-cli脚手架中(通过yyg命令行创建的项目内置该组件),如...
首先我们需要初始化一个 Vite + Vue + TS 的项目,这里使用 pnpm 作为包管理工具,当然你也可以使用 npm 或者 yarn。 pnpm create vite svg-example --template vue-tscdsvg-example pnpm install pnpm run dev 添加Svg 插件 创建项目后会有一个 vue 的图标,我们就使用这个图标来展示。 我们需要安装一个插件来...
文中实现的svg-icon组件会内置到yyg-cli脚手架中(通过yyg命令行创建的项目内置该组件),如果在此之前已经通过 yyg-cli 创建了项目,可以按照本文的步骤封装 SVG 图标组件svg-icon。 1 创建组件 在src/components/目录下创建目录svg-icon,该在目录中创建 svg-icon 组件index.vue。 1.1 输入属性 该组件需要两个输...
首先，在`src/components/`目录下创建`svg-icon`目录，并在其中创建`index.vue`组件。该组件需具备两个输入属性（props）：图标名称和样式类。在`style`中定义`svg-icon`的样式类，为组件添加CSS样式。对于在线 SVG 图标，通过HTML的`div`元素显示，利用CSS的`mask`属性来展示图标。在`script`中，判...
需要最后达到的使用目的 {代码...} 以下为原理介绍,如跳过直接查看 vite-plugin-iconify 。先创建一个 VIcon 组件假设我们首先封装一个 v-icon 组件在 src/c...
我的svg 文件路径 3. SvgIcon 组件实现 📃src/components/SvgIcon.vue <template><svg:class="svgClass"aria-hidden="true"><use:xlink:href="iconName":fill="color"/></svg></template>import {computed, defineComponent} from 'vue' export default...
通过这段配置，你的 Vite 项目将具备强大的 SVG 图标加载能力，让你的应用如虎添翼，轻松应对各种图标需求！步骤 3：创建 SVG 组件 现在，让我们为项目打造一个专门的 SVG 图标组件，提升图标的使用灵活性和可维护性。在你的 Vue 3 项目中，创建一个名为 SvgIcon 的文件夹，并在其中新建 index.vue 文件。
假设我们首先封装一个v-icon组件在src/components/VIcon.vue。 <template><slot/></template>.v-icon{display:inline-block;width:1em;height:1em;font-size:1em;}.v-icon>svg{width:100%;height:100%;} 使用unplugin-icons 作为图标按需加载 在目前的解决方案...
一、安装vite-plugin-svg-icons 此处还需要安装下fast-glob相关依赖,不然vite运行npm run dev时会报Cannot find module 'fast-glob’的错误 npm i fast-glob@3.x -D npm i vite-plugin-svg-icons@2.x -D AI代码助手复制代码 二、在src/components/svgIcon下新建组件index.vue ...
新建vue 组件:/src/components/SvgIcon.vue <template><svg:class="svgClass"aria-hidden="true"><use:href="symbolId"/></svg></template>import{defineComponent,computed}from'vue'exportdefaultdefineComponent({name:'SvgIcon',props:{prefix:{type:String,default:'icon'},name:{type:String,required:true...