importVuefrom'vue'importSvgIconfrom'@/components/SvgIcon'// svg component// register globallyVue.component('svg-icon',SvgIcon)constreq=require.context('./svg',false,/\.svg$/)constrequireAll=requireContext=>requireContext.keys().map(requireContext)requireAll(req) 2.3、src--assets--icons--svgo...
src文件里面的components文件夹,components文件夹里面的svgIcon文件夹,svgIcon文件夹里面新建Index.vue文件,Index.vue文件的内容如下: iconName和className属性是从引用PageSidebar.vue的父组件传递过来的 <template> <svg :class="svgClassName" aria-hidden="true"> <use :xlink:href="svgIcon"></use> </svg> ...
icons文件下的index.js文件中的代码如下: import Vue from 'vue'import SvgIcon from'@/components/SvgIcon'//svg组件//register globallyVue.component('svg-icon', SvgIcon) const req= require.context('./svg',false, /\.svg$/) const requireAll= requireContext =>requireContext.keys().map(requireCon...
Vue3纯样式的svg-icon组件 /* * 使用方法:<svg-iconsvg-name="icon-name"width="40px"height="40px"color="#f00"></svg-icon>*/ const props = defineProps({ svgName: { type: String, default: '' }, width: { type: String, default: '20px' }, height: { type: String, default: '20...
一、安装组件svg-sprite-loader npm install svg-sprite-loader --save-dev || yarnaddsvg-sprite-loader AI代码助手复制代码 二、在src/components下新建文件夹及文件SvgIcon/index.vue,index.vue添加如下内容: <template><svgv-else:class="svgClass"aria-hidden="true"v-on="$listeners"><use:xlink:href=...
1、设置组件component/icon-svg.vue <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </template> export default { name: "svgClass", props: { // 使用icon的图标类型 iconClass: { type: String...
创建Svg-icon 组件 让我们创建 Svg-icon.vue 组件文件,并在里面接收三个 prop 变量。 icon 是一个字符串类型的 prop 变量用来传递 .svg 文件名的导入 hasFill 是一个布尔类型的 prop 变量来告诉组件 fill 属性是否用于更改 <svg> 元素的颜色,默认值为 false 即不使用 fill 属性 ...
一、安装组件svg-sprite-loader npminstallsvg-sprite-loader--save-dev||yarnaddsvg-sprite-loader 二、在src/components下新建文件夹及文件SvgIcon/index.vue,index.vue添加如下内容: 在这里插入图片描述 <template><svgv-else:class="svgClass"aria-hidden="true"v-on="$listeners"><use:xlink:href="iconName...
1.新建存放svg图标的目录 在项目 src 目录下新建 src/icons/svg 目录(存放 svg 图标文件)。 2.创建svg文件的入口文件 在src/icons 下创建 icons 目录的入口文件 index.js ,负责svg文件的加载 importVuefrom'vue' importSvgIconfrom'@/components/SvgIcon' ...
一、安装 vite-plugin-svg-icons 二、创建图标文件夹 三、main.ts 引入注册脚本 四、vite.config.ts 插件配置 五、TypeScript支持 六、组件封装 七、使用 Element Plus 图标库往往满足不了实际开发需求,可以引用和使用第三方例如 iconfont 的图标,本节通过整合 vite-plugin-svg-icons 插件使用第三方图标库。