npm install vite-plugin-svg-icons -D 1. 在vite.config.ts 中配置插件: import { createSvgIconsPlugin} from 'vite-plugin-svg-icons'; import path from 'path'; plugins: [ createSvgIconsPlugin({ iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')], symbolId: 'icon-[dir]-[name]...
文中实现的svg-icon组件会内置到yyg-cli脚手架中(通过yyg命令行创建的项目内置该组件),如果在此之前已经通过 yyg-cli 创建了项目,可以按照本文的步骤封装 SVG 图标组件svg-icon。 1 创建组件 在src/components/目录下创建目录svg-icon,该在目录中创建 svg-icon 组件index.vue。 1.1 输入属性 该组件需要两个输...
"types": ["vite-plugin-svg-icons/client"] } } 1. 2. 3. 4. 5. 6. 六、组件封装 在src/components文件夹下新建SvgIcon文件夹,然后在SvgIcon文件夹下index.ts文件,内容如下: <!--src/components/SvgIcon/index.vue--> <template> <svg aria-hidden="true" class="svg-icon" :style="'width:'...
<svg-icon iconName="q" /> 下面我们就开始编写插件及组件,来实现它,分5步走 - 第一步: 建立所需文件 - 第二步:封装转换并读取svg文件的插件 - 第三步:利用vite transformIndexHtml封装渲染svg内容 - 第四步:封装vue组件并全局注册 - 第五步:页面中应用传值 第一步:建立所需文件 首先在src文件夹下建...
Vue.component('SvgIcon', SvgIcon) 4、再在assets下创建icons文件夹,将所有的svg图标放进去,name就是svg的名字,例如 <svg-icon name="test"></svg-icon> 如果项目不能成功显示SVG,可以尝试重新启动项目。 二、方法二 方法二需要自己配置,有些麻烦 ...
浏览器渲染svg的性能一般,还不如png。 第一步:拷贝项目下面生成的symbol代码: 第二步:加入通用css代码(引入一次就行: .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } 第三步:挑选相应图标并获取类名,应用于...
奈何element 自带的图标太少,不够用,故打算使用 vite-plugin-svg-icons 组件来封装 svg-icon 。 ps: ui 框架选用的 element-ui,为了能跟 vue3 更好的结合,还得装个 element-plus。 首先就是安装:npm install vite-plugin-svg-icons-D main.js 引入图标脚本 ...
1、封装svg图标组件 新建src/components/SvgIcon/index.vue <template><!-- 即使 aria-hidden=...
第一个参数是:'./svg' => 需要检索的目录, 第二个参数是:false => 是否检索子目录, 第三个参数是: /\.svg$/ => 匹配文件的正则 */requireAll(req); index.vue文件 <template><svg:class="svgClass"aria-hidden="true"><use:xlink:href="iconName"/></svg></template>export default { name: ...
1、安装 vite-plugin-svg-icon失败 失败原因:是现有vite版本太低 解决办法:升级vite版本 2、封装组件 现象:defineOption会报错,并且无法使用组件 解决办法:删掉这段代码,然后在index.ts注册组件那里从这样: 修改成这样: 然后就能正常使用组件了。 没有实践:编写自定义 vite 插件,增强 name 字段类型提示 下面的...