1、安装vite-plugin-svg-icons yarn add vite-plugin-svg-icons -D or npm i vite-plugin-svg-icons -D 2、添加配置:在vite.config.js中配置插件 import { createSvgIconsPlugin }from'vite-plugin-svg-icons'; import Pathfrom'path'; exportdefaultdefineConfig({ plugins: [ createSvgIconsPlugin({//指定...
首先我们需要初始化一个 Vite + Vue + TS 的项目,这里使用 pnpm 作为包管理工具,当然你也可以使用 npm 或者yarn。 pnpm create vite svg-example --template vue-tscdsvg-example pnpm install pnpm run dev 添加Svg 插件 创建项目后会有一个vue的图标,我们就使用这个图标来展示。 我们需要安装一个插件来处理 ...
将你的SVG图标文件放在一个合适的位置,比如src/assets/icons目录下。 3. 在Vue 3项目中导入SVG图标 你可以直接在Vue组件中导入SVG文件作为模块,这样它们就可以被当作React组件一样使用。Vite会处理这些文件的导入,并允许你在组件中直接使用它们。 例如,假设你有一个名为icon.svg的文件,你可以这样导入它: vue <...
一、安装 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 {c...
npm i vite-plugin-svg-icons -D 2. 新建文件夹 src/assets/icons/svg来存放svg 图片 3.新建组件src/components/SvgIcon/index.vue <template><svg:style="{width, height}"><use:xlink:href="prefix + name":fill="color"></use></svg></template>defineProps({ //前缀 prefix: { type...
这里使用yarn来安装vite-plugin-svg-icons插件 yarn add vite-plugin-svg-icons 文件配置 在vite.config.ts中进行文件配置,首先是引入插件,其次是在plugins中添加配置 iconDirs中存放的就是图标文件地址数组,这里的目录是 src/assets/icons // 引入svg需要用到的插件import{ createSvgIconsPlugin }from'vite-plugin-...
import{createApp}from"vue";importAppfrom"./App.vue";importsvgIconfrom'./icons/svgIcon.vue'createApp(App).component('svg-icon',svgIcon).mount("#app"); 6.在vite.config.ts中导入svgIcon.ts,在defineConfig()中加入createSvg(),如下所示 ...
1. vite-plugin-svg-icons插件 本文的项目使用vue3+vite来构建,可以使用第三方的vite-plugin-svg-icons插件,来引入svg图标。 安装 安装vite-plugin-svg-icons插件 # npmnpm i vite-plugin-svg-icons -D# yarnyarn add vite-plugin-svg-icons -D# pnpmpnpm install vite-plugin-svg-icons -D ...
6. 在vite.config.ts中导入svgIcon.ts，并在defineConfig()中加入createSvg()，具体如下：7. 配置完成后，我们可以通过以下方式导入自己的svg图片。还可以使用main.ts中设置的组件名，例如：createApp(App).component('aaa', svgIcon)，也可以这样导入。效果如下：附录-导入@type/node：1. 安装@...
svg 可以当做 图标 导入react 里面 ,如果用img标签弄的话,无法控制 图标颜色 和字体 大小 ,但是把他当组件导入的话,就可以这么控制了,比较方便 ,并且也方便 webstorm 预览 首先 安装vite-plugin-svgr pnpm add vite-plugin-svgr -D 然后使用修改vite.config.js ...