8svg 自定义全局组件
0.https://www.npmjs.com/package/vue2-svg-icon 直接使用vue2-svg-icon插件 。如果不使用,就使用下面用法
注意:用阿里图标时候,最好都选择#fff白色。自己也可以设置
1.目录结构
2.svgicon/index.js
import SvgIcon from './SvgIcon' const svgIcon = { install(Vue) { Vue.component('SvgIcon', SvgIcon) } } export default svgIcon // 解析svg格式文件代码 const req = require.context('./svg', false, /\.svg$/); const requireAll = (requireContext) => { return requireContext.keys().map(requireContext) }; requireAll(req);
3.svgincon/SvgIcon.vue
<template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName" /> </svg> </template> <script> export default { name: "SvgIcon", props: { iconClass: { type: String, required: true }, //用户传的svg图片名字 className: { type: String } //用户svg图片自定义样式 }, data() { return { // svgClass:'svg-icon' }; }, computed: { iconName() { return `#icon-${this.iconClass}`; }, svgClass() { return this.className ? `svg-icon ${this.className}` : "svg-icon"; //用户如果传了就保留两者 } } }; </script> <style lang="scss" scoped> .svg-icon { width: 1em; height: 1em; fill: currentColor; margin-right: 5px; } </style>
4. main.js
// 导入全局自定义组件 import SvgIcon from './components/globalComponents/svgicon' Vue.use(SvgIcon)
5.vue.config.js
黄色部分 注意要装svg-sprite-loader
const path = require('path'); module.exports = { // 基本路径 publicPath: process.env.NODE_ENV === 'production' ? '' : '/', // 输出文件目录 outputDir: process.env.NODE_ENV === 'production' ? 'dist' : 'devdist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, /** * webpack配置,see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md **/ chainWebpack: (config) => { const svgRule = config.module.rule('svg') svgRule.uses.clear() svgRule.use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]', include: ['./src/icons'] }) }, configureWebpack: (config) => { config.resolve = { // 配置解析别名 extensions: ['.js', '.json', '.vue'], alias: { '@': path.resolve(__dirname, './src'), // 'public': path.resolve(__dirname, './public'), // 'components': path.resolve(__dirname, './src/components'), // 'common': path.resolve(__dirname, './src/common'), // 'api': path.resolve(__dirname, './src/api'), // 'views': path.resolve(__dirname, './src/views'), // 'data': path.resolve(__dirname, './src/data') } } }, // 生产环境是否生成 sourceMap 文件 productionSourceMap: false, // css相关配置 css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps? sourceMap: false, // css预设器配置项 loaderOptions: { scss: { prependData: `@import "./src/styles/main.scss";` } }, // 启用 CSS modules for all css / pre-processor files. modules: false }, // use thread-loader for babel & TS in production build // enabled by default if the machine has more than 1 cores parallel: require('os').cpus().length > 1, /** * PWA 插件相关配置,see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa */ pwa: {}, // webpack-dev-server 相关配置 devServer: { open: false, // 编译完成是否打开网页 host: '0.0.0.0', // 指定使用地址,默认localhost,0.0.0.0代表可以被外界访问 port: 8080, // 访问端口 https: false, // 编译失败时刷新页面 hot: true, // 开启热加载 hotOnly: false, proxy: { '/devApi': { target: 'http://www.web-jshtml.cn/productapi',//设置你调用的接口域名/http://www.web-jshtml.cn/api changeOrigin: true, pathRewrite: { '^/devApi': '' } } }, // 设置代理 overlay: { // 全屏模式下是否显示脚本错误 warnings: true, errors: true }, before: app => { } }, /** * 第三方插件配置 */ pluginOptions: {} }
6.use
<template> <div>
<svg-icon :icon-class="item.icon" className="demo"></svg-icon>
</div> </template>
<style lang="scss" scoped>
.el-menu {
border-right: none;
.demo{
font-weight: 700;
}
}
7result