网站项目策划书方案,动易网站制作教程,建筑工程挂网甩浆,网站制作成功后怎么使用文章目录 一、准备工作#xff08;在 Vue3 中使用 SVG#xff09;二、封装 SVG三、封装图标选择器四、Demo 效果预览#xff1a; 一、准备工作#xff08;在 Vue3 中使用 SVG#xff09;
本文参考#xff1a;https://blog.csdn.net/houtengyang/article/details/1290431… 文章目录 一、准备工作在 Vue3 中使用 SVG二、封装 SVG三、封装图标选择器四、Demo 效果预览 一、准备工作在 Vue3 中使用 SVG
本文参考https://blog.csdn.net/houtengyang/article/details/129043100 安装插件 npm i vite-plugin-svg-icons配置插件 修改 vite.config.js import {resolve} from path
import {createSvgIconsPlugin} from vite-plugin-svg-icons;export default defineConfig({plugins: [vue(),createSvgIconsPlugin({iconDirs: [resolve(process.cwd(), public)], // svg 文件存放位置symbolId: icon-[name], // 指定symbolId格式}),],
})注意我的 svg 存放路径是根目录下的 ./public多数情况下放在 ./src/assets。 修改 main.js增加一行代码。 import virtual:svg-icons-register使用示例 svg aria-hiddentrue stylewidth: 14px; height: 14pxuse :href#icon-${menu.icon} //svg二、封装 SVG 将上述使用示例封装为组件。 在 ./src/components 下创建 Icon.vue script setup
const props defineProps({prefix: {type: String, default: icon},name: {type: String, required: true},color: {type: String},size: {type: String, default: 1em}
});const symbolId computed(() #${props.prefix}-${props.name});
/scripttemplatesvg aria-hiddentrue classsvg-icon :stylevertical-align:middle;width: size ;height: sizeuse :hrefsymbolId :fillcolor//svg
/templatestyle scoped
.svg-icon {overflow: hidden;fill: currentColor;
}
/stylesvg 样式里添加了 vertical-align:middle 使用示例 Icon :namevite/Icon三、封装图标选择器 在 ./src/components 下创建 IconSelect.vue script setup
import Icon from /components/Icon.vue;const props defineProps({modelValue: {type: String, default: },
});const value ref(props.modelValue)
const icons [];
const modules import.meta.glob(../../public/**/*.svg);
for (const path in modules) {const name path.split(public/)[1].split(.svg)[0];icons.push(name);
}const emits defineEmits([update:modelValue]);
const change (name) {emits(update:modelValue, name)
}
/scripttemplateel-select v-modelvalue changechange filterable clearable placeholderSelect Iconel-option v-foritem in icons :keyitem :labelitem :valueitemspan stylefloat: leftIcon :nameitem size30px/Icon/spanspan stylefloat: right;color: var(--el-text-color-secondary);font-size: 13px;{{ item }}/span/el-option/el-selectIcon :namevalue size32px stylepadding-left: 10px/Icon
/templateimport.meta.glob(../../public/**/*.svg) 用于获取 ./public 路径下各个层级的 .svg 文件。 使用示例在表单中使用 el-form-item labelIconIconSelect v-modelobj.icon/IconSelect
/el-form-item四、Demo
script setup
import IconSelect from /components/IconSelect.vue;
import Icon from /components/Icon.vue;const symbol ref()
/scripttemplate{{ symbol }}Icon :namesymbol size32px stylepadding-left: 10px/Iconbr/IconSelect v-modelsymbol/
/template
