Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Optionally replace stroke color #68

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Optionally replace stroke color #68

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2c01612
feature: add replaceStrokeWithCurrentColor option
digitalacorn Jul 15, 2022
3a57f97
chore: update readmes
digitalacorn Jul 15, 2022
4b22315
chore: update docs
digitalacorn Aug 20, 2022
2f35ad0
Merge remote-tracking branch 'vbenjs/main' into feat/update-deps
peterdzl Jun 12, 2024
6de7506
chore: update lock
peterdzl Jun 12, 2024
dcff921
chore: test on all branches
peterdzl Jun 12, 2024
1f41a33
Merge pull request #1 from ZeroLight-Ltd/feat/update-deps
digitalacorn Jun 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 14 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,12 @@ export default () => {
* @default: __svg__icons__dom__
*/
customDomId: '__svg__icons__dom__',

/**
* option to perform a replacement of stroke colors with currentColor
* @default：true
*/
replaceStrokeWithCurrentColor: true
}),
],
}
Expand Down Expand Up @@ -198,13 +204,14 @@ import ids from 'virtual:svg-icons-names'

### Options

| Parameter | Type | Default | Description |
| ----------- | ---------------------- | --------------------- | ------------------------------------------------------------------------------------- |
| iconDirs | `string[]` | - | Need to generate the icon folder of the Sprite image |
| symbolId | `string` | `icon-[dir]-[name]` | svg symbolId format, see the description below |
| svgoOptions | `boolean｜SvgoOptions` | `true` | svg compression configuration, can be an object[Options](https://github.com/svg/svgo) |
| inject | `string` | `body-last` | svgDom default insertion position, optional `body-first` |
| customDomId | `string` | `__svg__icons__dom__` | Customize the ID of the svgDom insert node |
| Parameter | Type | Default | Description |
| ----------------------------- | ---------------------- | --------------------- | ------------------------------------------------------------------------------------- |
| iconDirs | `string[]` | - | Need to generate the icon folder of the Sprite image |
| symbolId | `string` | `icon-[dir]-[name]` | svg symbolId format, see the description below |
| svgoOptions | `boolean｜SvgoOptions` | `true` | svg compression configuration, can be an object[Options](https://github.com/svg/svgo) |
| inject | `string` | `body-last` | svgDom default insertion position, optional `body-first` |
| customDomId | `string` | `__svg__icons__dom__` | Customize the ID of the svgDom insert node |
| replaceStrokeWithCurrentColor | `boolean` | `true` | Whether to perform a replacement of stroke colors with currentColor |

**symbolId**

Expand Down
21 changes: 14 additions & 7 deletions README.zh_CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,12 @@ export default () => {
* @default: __svg__icons__dom__
*/
customDomId: '__svg__icons__dom__',

/**
* option to perform a replacement of stroke colors with currentColor
* @default：true
*/
replaceStrokeWithCurrentColor: true
}),
],
}
Expand Down Expand Up @@ -169,13 +175,14 @@ import ids from 'virtual:svg-icons-names'

### 配置说明

| 参数 | 类型 | 默认值 | 说明 |
| ----------- | ---------------------- | --------------------- | -------------------------------------------------------------- |
| iconDirs | `string[]` | - | 需要生成雪碧图的图标文件夹 |
| symbolId | `string` | `icon-[dir]-[name]` | svg 的 symbolId 格式，见下方说明 |
| svgoOptions | `boolean｜SvgoOptions` | `true` | svg 压缩配置，可以是对象[Options](https://github.com/svg/svgo) |
| inject | `string` | `body-last` | svgDom 默认插入的位置，可选`body-first` |
| customDomId | `string` | `__svg__icons__dom__` | svgDom 插入节点的 ID |
| 参数 | 类型 | 默认值 | 说明 |
| ----------------------------- | ---------------------- | --------------------- | -------------------------------------------------------------- |
| iconDirs | `string[]` | - | 需要生成雪碧图的图标文件夹 |
| symbolId | `string` | `icon-[dir]-[name]` | svg 的 symbolId 格式，见下方说明 |
| svgoOptions | `boolean｜SvgoOptions` | `true` | svg 压缩配置，可以是对象[Options](https://github.com/svg/svgo) |
| inject | `string` | `body-last` | svgDom 默认插入的位置，可选`body-first` |
| customDomId | `string` | `__svg__icons__dom__` | svgDom 插入节点的 ID |
| replaceStrokeWithCurrentColor | `boolean` | `true` | - |

**symbolId**

Expand Down
10 changes: 7 additions & 3 deletions packages/core/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export function createSvgIconsPlugin(opt: ViteSvgIconsPlugin): Plugin {
symbolId: 'icon-[dir]-[name]',
inject: 'body-last' as const,
customDomId: SVG_DOM_ID,
replaceStrokeWithCurrentColor: true,
...opt,
}

Expand Down Expand Up @@ -194,7 +195,7 @@ export async function compilerIcons(
const getSymbol = async () => {
relativeName = normalizePath(path).replace(normalizePath(dir + '/'), '')
symbolId = createSymbolId(relativeName, options)
svgSymbol = await compilerIcon(path, symbolId, svgOptions)
svgSymbol = await compilerIcon(path, symbolId, svgOptions, options)
idSet.add(symbolId)
}

Expand Down Expand Up @@ -227,6 +228,7 @@ export async function compilerIcon(
file: string,
symbolId: string,
svgOptions: OptimizeOptions,
options: ViteSvgIconsPlugin,
): Promise<string | null> {
if (!file) {
return null
Expand All @@ -239,8 +241,10 @@ export async function compilerIcon(
content = data || content
}

// fix cannot change svg color by parent node problem
content = content.replace(/stroke="[a-zA-Z#0-9]*"/, 'stroke="currentColor"')
if (options.replaceStrokeWithCurrentColor) {
// fix cannot change svg color by parent node problem
content = content.replace(/stroke="[a-zA-Z#0-9]*"/, 'stroke="currentColor"')
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can replace multiple strokes at once instead of just one.

}
const svgSymbol = await new SVGCompiler().addSymbol({
id: symbolId,
content,
Expand Down
6 changes: 6 additions & 0 deletions packages/core/src/typing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,12 @@ export interface ViteSvgIconsPlugin {
* @default: __svg__icons__dom__
*/
customDomId?: string

/**
* option to perform a replacement of stroke colors with currentColor
* @default：true
*/
replaceStrokeWithCurrentColor?: boolean
}

export interface FileStats {
Expand Down